Добавляет элементу одну или несколько теней, перечисляя их через запятую. В свойстве выставляются смещения по x и y от элемента, радиус скругления, а также цвет. Свойство задает тень для почти любого элемента. Если применяется свойство border-radius, то тень также будет иметь закруглённые углы.
Примеры
box-shadow: 10px 5px 5px black;
box-shadow: 10px 10px 5px #aaaaaa;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
box-shadow: 60px -16px teal;Значения
| Значение | Описание |
|---|---|
| none | По умолчанию. Тень не отображается. |
| h-offset | Обязательное. Смещение тени по горизонтали. Положительное значение отображает тень в правой части элемента, отрицательное – в левой. |
| v-offset | Обязательное. Смещение тени по вертикали. Положительное значение отображает тень в верхней части элемента, отрицательное – в нижней. |
| blur | Радиус размытия. Чем больше число, тем более размытой будет тень. |
| spread | Радиус распространения. Положительное значение увеличивает размер тени, отрицательное – сжимает. |
| color | Цвет тени. Значение по умолчанию – цвет текста. В Safari (на ПК) параметр цвета является обязательным. Если не указать цвет, тень вообще не отображается. |
| inset | Тень выводится внутри элемента. |
| inherit | Наследует значение родительского блока. |
| initial | Устанавливает значение по умолчанию. |
Поддержка браузерами
НастольныеМобильные
Chrome
Edge
Firefox
IE
Opera
Safari
Chrome
Firefox
Opera
Safari
Samsung
Androidbox-shadow10
1 -webkit-
12
4
3.5-13 -moz-
49 -webkit-
44 -webkit-
9
10.5
5.1
3 -webkit-
18
18 -webkit-
4
4-14 -moz-
49 -webkit-
44 -webkit-
14
14 -webkit-
5
1 -webkit-
1.0
1.0 -webkit-
≤37
≤37 -webkit-
inset10
1 -webkit-
12
4
3.5-13 -moz-
9
10.5
5.1
5 -webkit-
18
18 -webkit-
4
4-14 -moz-
14
14 -webkit-
5
4.2 -webkit-
1.0
1.0 -webkit-
≤37
≤37 -webkit-
Multiple shadows
10
1 -webkit-
12
4
3.5-13 -moz-
9
10.5
5.1
3 -webkit-
18
18 -webkit-
4
4-14 -moz-
14
14 -webkit-
5
1 -webkit-
1.0
1.0 -webkit-
≤37
≤37 -webkit-
Spread radius
10
1 -webkit-
12
4
3.5-13 -moz-
9
10.5
5.1
5 -webkit-
18
18 -webkit-
4
4-14 -moz-
14
14 -webkit-
5
4.2 -webkit-
1.0
1.0 -webkit-
≤37
≤37 -webkit-
Поддерживается: Да Нет Частично Пользователь должен включить
