Добавляет тень к элементу. Допускается использовать несколько теней. Для этого их параметры указываются через запятую. При наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.
CSS синтаксис
box-shadow: none | x-сдвиг y-сдвиг размытие растяжение цвет | inset | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Тень не отображается. |
| x-сдвиг | Обязательное значение. Смещение тени по горизонтали относительно элемента. Положительное значение задает сдвиг тени вправо, отрицательное - влево. |
| y-сдвиг | Обязательное значение. Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное - вверх. |
| размытие | Необязательное значение. Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой. |
| растяжение | Необязательное значение. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент. |
| цвет | Необязательное значение. Устанавливает цвет тени. По умолчанию тень черная. (см. Как использовать цвета) |
| inset | Необязательное значение. Переключает отображение тени снаружи элемента на отображение внутри элемента. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Добавляем тень элементу <div>
div {
box-shadow: 10px 10px 5px #888888;
}
