Несколько рамок границ CSS - PullRequest
Новая
       10

Несколько рамок границ CSS

0 голосов
/ 24 апреля 2019

Можете ли вы объяснить мне больше, это код Я не могу понять свойства тени блока. Я пытался выяснить, о чем все, но я могу. Большое спасибо! 

h1 {
    text-shadow: 5px 5px 2px #999;
}
h2 {
    color: #fff;
    text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
}
div {
    width: 50%;
    margin: auto;
    background-color: #ff0;
    box-shadow: 5px 0 10px #aaa, 0 5px 10px #aaa, -5px 0 10px #aaa, 0 -5px 10px #aaa;
}
 <!DOCTYPE html>
    <html>
    <head>
    	<title>03 - Senke</title>
    </head>
    <a>
    	<img src="">
    </a>
    <body>
    	<h1>03 Senke</h1>
    	<h2>Podnaslov</h2>
    	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

Как следует из названия, все это.Свойство box shadow добавляет тени к любому элементу, который вы хотите.

  1. 5px 0 10px #aaa эта часть будет применять тень в светло-черном оттенке справа.
  2. 0 5px 10px #aaa thisчасть будет применять тень в светло-черном оттенке с нижней стороны.
  3. -5px 0 10px #aaa эта часть будет применять тень в светло-черном оттенке с левой стороны.
  4. 0 -5px 10px #aaa thisЧасть будет применять тень в светло-черном оттенке на верхней стороне.

Первое значение в отдельной паре значений сместит тень слева направо, а правая сторона останется прежней.2-е значение только сдвигает тень вверх / вниз в зависимости от значения (+ форма вверх-вниз и -ve значение снизу вверх).3-е значение добавляет плавности к оттенку (чем больше значение, тем более плавным будет затенение b), а 4-е - для цвета. 

#example1 {
  border: 1px solid;
  padding: 10px;
 box-shadow: 5px 0 10px #aaa, 0 5px 10px #aaa, -5px 0 10px #aaa, 0 -5px 10px #aaa;
}
<div id="example1">
  <p>A div element with a shadow. The first value is the horizontal offset and the second value is the vertical offset.The optional third value adds a blur effect to the shadow. The shadow color will be inherited from the text color.</p>
</div>
0 голосов
/ 24 апреля 2019

Вместо написания этого: 

box-shadow: 5px 0 10px #aaa, 0 5px 10px #aaa, -5px 0 10px #aaa, 0 -5px 10px #aaa;

Попробуйте это: 

box-shadow: 0px 0px 5px 7px rgba(0,0,0,0.75);

Короче говоря, каждое значение соответствует следующему:

Я бы предложил игнорироватьГраницы, причина того, что в вашем примере есть граница, является свойством "распространения" box-shadow, которое я объясню ниже. 

box-shadow: <horizontal length of shadow> <verticle length of shadow> <amount of blur in shadow> <the spread radius of the shadow (How far should the shadow be cast)> rgba(<RGBA color code>);

Посмотрите на этот инструмент: https://www.cssmatic.com/box-shadow Это простая маленькая страница, которая позволяет вам использовать ползунки для изменения тени в реальном времени, я чувствую, что это поможет вам лучше понять, как каждое из значений взаимодействует с одним и другим.

...