Добавляйте тени к различным элементам <div>:
#example1 {
box-shadow: 5px 10px;
}
#example2 {
box-shadow:
5px 10px #888888;
}
Попробуйте сами »
Определение box-shadow
CSS свойство box-shadow прикрепляет одну или несколько теней к элементу.
| Значение по умолчанию: | none |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.boxShadow="10px 20px 30px blue" Попробуй |
Поддержка box-shadow
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit- или -moz - указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| box-shadow | 10.0 4.0-webkit- |
9.0 | 4.0 3.5-moz- |
5.1 3.1-webkit- |
10.5 |
Синтаксис box-shadow
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Примечание: Чтобы прикрепить к элементу более одной тени, добавьте список теней, разделенных запятыми (смотрите пример "Попробуйте сами" ниже).
Значения box-shadow
| Значение | Описание | Демонстрация |
|---|---|---|
| none | Значение по умолчанию. Тень не отображается | Демо ❯ |
| h-offset | Требуется. Горизонтальное смещение тени. Положительное значение помещает тень на правую сторону рамки, отрицательное значение помещает тень на левую сторону рамки | Демо ❯ |
| v-offset | Требуется. Вертикальное смещение тени. Положительное значение помещает тень под рамку, отрицательное значение помещает тень над рамкой | Демо ❯ |
| blur | Необязательный. Радиус размытия. Чем больше значение, тем более размытой будет тень | Демо ❯ |
| spread | Необязательный. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow | Демо ❯ |
| color | Необязательный. Цвет тени. Значение по умолчанию - цвет текста. Смотреть CSS Значения цвета для получения полного списка возможных значений цвета. Примечание: В Safari (на ПК) параметр color обязателен. Если вы не укажете цвет, тень вообще не отобразится. |
Демо ❯ |
| inset | Необязательный. Изменяет тень с внешней тени (начало) на внутреннюю тень | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Совет: Подробнее о допустимых значениях (единицах длины CSS) читайте здесь
Примеры box-shadow
Добавьте эффект размытия к тени:
#example1 {
box-shadow: 10px 10px 8px #888888;
}
Попробуйте сами »
Определите радиус распространения тени:
#example1 {
box-shadow: 10px 10px 8px 10px #888888;
}
Попробуйте сами »
Определите несколько теней:
#example1 {
box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}
Попробуйте сами »
Изображения вложеные в таблицу. В этом примере демонстрируется, как создавать снимки "polaroid" и поворачивать снимки:
div.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid
#BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
Попробуйте сами »
Страницы по теме box-shadow
CSS Учебник: CSS Тень бокса
HTML DOM справочник: boxShadow свойство