СВОЙСТВО BOX-SHADOW
Свойство box-shadow добавляет одну или несколько теней к элементу.
Поддержка браузеров
| 9+ | ||||
Синтаксис
box-shadow: позиция-х позиция-y [радиус размытия] цвет|none|inset|initial|inherit
Значения свойства
| Значение | Описание |
|---|---|
| none | Тени не отображаются. Это значение по умолчанию. |
| позиция-х | Положение тени по горизонтали. Отрицательные значения допускаются. |
| позиция-у | Положение тени по вертикали. Отрицательные значения допускаются. |
| радиус размытия | Радиус размытия. Значение по умолчанию 0. |
| растяжение | Растяжение тени. Чем больше значение, тем больше размер тени. |
| color | Цвет тени. |
| inset | Переключает тень с внешней на внутреннюю. |
| initial | Устанавливает значение по умолчанию. |
| inherit | Унаследует значение свойства от родительского элемента. |
Песочница
<div class="block-1"></div> <div class="block-2"></div> <div class="block-3"></div>HTML
.block-1,
.block-2,
.block-3 {
height: 100px;
width: 100px;
margin-right: 15px;
background: beige;
display: inline-block
}
.block-1 {
box-shadow: 2px 2px 5px #000000
}
.block-2 {
box-shadow: 0 0 8px #000000 inset
}
.block-3 {
box-shadow: 5px 5px red, 10px 10px green, 15px 15px blue
}
CSS