Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS3 Свойство box-shadow


CSS Справочник Полный CSS Справочник

Пример

Добавить тень от блока к элементу div:

div
{
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari и Chrome */
box-shadow: 10px 10px 5px #888888;
}

Попробуйте сами »
Еще примеры внизу этой страницы.

Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Свойство box-shadow поддерживается в IE9+, Firefox 4, Chrome и Opera.

Safari поддерживает альтернативное свойство -webkit-box-shadow.


Определение и Использование

Свойство box-shadow добавляет один или более эффектов отбрасывания тени к блоку.

Значение по умолчанию: none
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: объект.style.boxShadow="10px 10px 5px #888888"


Синтаксис

box-shadow: h-тень v-тень размытие протяженность цвет inset;

Замечание: Свойство box-shadow присоединяет один или более эффектов отбрасывания тени к блоку. Это свойство задается списком теней через запятую, каждая тень указывается 2-4 значениями длин, необязательным значением цвета и необязательным ключевым словом inset. Пропущенные длины приравниваются к нулю.

Значение Описание
h-тень Обязательно. Положение горизонтальной тени. Допустимы отрицательные значения.
v-тень Обязательный параметр. Положение вертикальной тени. Допустимы отрицательные значения
размытие Не обязательный параметр. Расстояние размытия.
протяженность Не обязательно. Размер тени
цвет Не обязательно. Цвет тени. Смотрите полный список с возможными значениями цветов в Справочнике Значений Цветов CSS.
inset Не обязательно. Изменяет тень с внешней (выпуклой) на внутреннюю тень


Примеры

Попробуйте сами - Примеры

Фотографии, разбросанные по столу
Этот пример демонстрирует, как создавать изображения, которые смотрятся как фотографии "c полароида", и вращать рисунки.


Смотрите Также

CSS3 уроки: CSS3 Границы


CSS Справочник Полный CSS Справочник

© 2011-2017 Уроки CSS
Рейтинг@Mail.ru