Свойство box-shadow

Последнее обновление: 16.12.2011

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

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

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

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

  • none — элемент не имеет тени.
  • <тень> — тень элемента. Теней может быть несколько, описание каждой может содержать следующие параметры:
    • inset — ключевое слово, которое говорит о том, что тень внутренняя.
    • <значение> — смещение тени по оси, радиус размыва и радиус распространения.
Значение по умолчанию none
Применимо ко всем элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами
  • Internet Explorer 9 и выше
  • Firefox 4 и выше
  • Opera 10.5 и выше
  • Chrome 10 и выше

Пример

h1 {
box-shadow: inset 0px 3px 0px 3px #000, 3px 10px ;
}
Твой код:
Результат:
большой полигон

Заметки

Safari 3 и выше и Chrome 1-10 поддерживают аналогичное свойство -webkit-box-shadow, Firefox 3.5-4.0 -moz-box-shadow. Свойство -webkit-box-shadow поддерживает возможность задать множественные тени только для Safari 4.0 и выше, и не поддерживает возможности задать радиус распространения тени. Внутреннюю тень для свойства -webkit-box-shadow поддерживает Chrome 4-10 и Safari 5.

По теме

Показать комментарии