Тень элемента: box-shadow

box-shadow

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 10.0 4.0 9.0 10.5 5.1
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4.0.3 1.0 7 12.0 5.0
Свойство
box-shadow — это свойство добавляет тень к элементу
Описание
Тень позволяет выделить элемент из общего потока, придать элементу особенное значение, украсить его
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
значение в абсолютных единицах | значение в относительных единицах (em) | inset | none
Значение по умолчанию
none
Правила записи

свойство: значение;

Значение тени состоит из нескольких частей:

  1. Смещение тени по горизонтали ( обязательно, допускается отрицательное значение )
  2. Смещение тени по вертикали ( обязательно, допускается отрицательное значение )
  3. Радиус размытия тени ( не обязательно )
  4. Расстояние на которое распространяется тень ( не обязательно )
  5. Цвет тени ( не обязательно, если цвет тени не указан, то цвет тени будет таким же как цвет текста )
Примеры

<div>

Тень у этого блока имеет смещение по горизонтали 10px и смещение по вертикали 15px

</div>

<div>

Тень у этого блока имеет смещение по горизонтали 10px, смещение по вертикали 15px, радиус размытия 20px

</div>

<div>

Тень у этого блока имеет смещение по горизонтали 10px, смещение по вертикали 15px, радиус размытия 20px, распространение тени 9px

</div>

<div>

Тень у этого блока имеет смещение по горизонтали 10px, смещение по вертикали 15px, радиус размытия 20px, распространение тени 9px, цвет тени darkkhaki

</div>

<div>

Зарезервированное слово inset означает что тень будет внутри границ

</div>

Поделиться