-webkit-box-shadow

Свойство -webkit-box-shadow — задает эффект тени элементу. При этом размер элемента не меняется (несмотря на то что тень может быть расположена далеко за пределами элемента).

Значения свойства задает список теней, каждая из которых имеет 2 значения смещения по осям, радиус размывания и цвет. Порядок значений строго определен.

Смещение тени задается относительно верхнего левого угла текста. Положительные значения смещения сдвигают тень вправо и вниз, отрицательные влево и вверх.

Допустимые значения

  • none — элемент не имеет тени.
  • <тень> — тень элемента. Теней может быть несколько, описание каждой может содержать следующие параметры:
    • inset — ключевое слово, которое говорит о том, что тень внутренняя (поддерживает Chrome 4 и выше)
    • <значение> — смещение тени по оси x, по оси y, радиус размыва.
    • <цвет> — цвет тени.
Значение по умолчанию none
Применимо ко всем элементам
Наследование нет
Поддерживается браузерами
  • Safari 3.0 и выше (возможность задать несколько теней поддерживает Safari 4.0 и выше, Safari не поддерживает inset)
  • Chrome 1.0 и выше (inset поддерживает Chrome 4.0 и выше)

Пример

CSS
h1 {
-webkit-box-shadow: inset 0px 3px 3px #000, 3px 10px 1px #f00;
}

Заметки

В спецификации CSS3 есть аналогичное свойство box-shadow.

По теме