Тени - CSS свойства

100
посл. ред. 21.06.2016

Краткое описание свойств

text-shadow
Добавляет тень к тексту.
box-shadow
Добавляет тень к блоку.

Свойство text-shadow

Добавляет тень к тексту.

Краткая информация

Значение по умолчанию none
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM textShadow

Значения

Необходимо задать 4 параметра через пробел:

  • Смещение по оси X. Положительное значение - тень смещается вправо, отрицательное значение - влево.
  • Смещение по оси Y. Положительное значение - тень смещается вниз, отрицательное значение - вверх.
  • Размытие тени. Значение 0 для чёткой тени.
  • Цвет тени в любом формате, используемом в CSS.

Примечания

Можно задавать несколько теней через запятую.

Примеры

text-shadow: 1px 1px 0 #00F;

Тень смещена на 1 пиксель вправо и на 1 пиксель вниз. Размытие отсутствует. Цвет тени - синий.

Свойство box-shadow

Добавляет тень к блоку.

Краткая информация

Значение по умолчанию none
Применяется ко всем элементам
Наследуется нет
Имя свойства в DOM boxShadow

Значения

Необходимо задать 5 параметров через пробел:

  • Смещение по оси X. Положительное значение - тень смещается вправо, отрицательное значение - влево.
  • Смещение по оси Y. Положительное значение - тень смещается вниз, отрицательное значение - вверх.
  • Размытие тени. Значение 0 для чёткой тени.
  • Размер тени. Положительное значение - размер тени увеличивается во всех направлениях, отрицательное значение - размер тени уменьшается во всех направлениях. При значении 0 размер тени равен размеру блока.
  • Цвет тени в любом формате, используемом в CSS.

Примечания

Можно задавать несколько теней через запятую.

Чтобы тень была не снаружи блока, а внутри, необходимо добавить ключевое слово inset.

Примеры

box-shadow: 1px 1px 0 2px #0F0;

Тень смещена на 1 пиксель вправо и на 1 пиксель вниз. Размытие отсутствует. Размер тени больше размера блока на 2 пикселя во всех направлениях. Цвет тени - зелёный.

Пример тени внутри блока:

box-shadow: inset 1px 1px 0 0 #0F0;