CSS box-shadow Свойство
Пример
Добавление теней к различным элементам <div>:
#example1 {
box-shadow: 5px 10px;
}
#example2 {
box-shadow:
5px 10px #888888;
}
Подробнее примеры ниже.
Определение и использование
Свойство box-shadow присоединяет одну или несколько теней к элементу.
| Значение по умолчанию: | none |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.boxShadow="10px 20px 30px blue" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
Синтаксис CSS
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Примечание: Чтобы прикрепить к элементу более одной тени, добавьте список теней с разделителями-запятыми (SE "Попробуйте сами" пример ниже).
Значения свойств
| Значение | Описание | |
|---|---|---|
| none | Значение по умолчанию. Тень не отображается | |
| h-offset | Обязательно. Горизонтальное смещение тени. Положительное значение кладет тень на правую сторону коробки, отрицательное значение кладет тень на левую сторону коробки | |
| v-offset | Обязательно. Смещение тени по вертикали. Положительное значение кладет тень под коробку, отрицательное значение кладет тень над коробкой | |
| blur | Дополнительные. Радиус размытия. Чем выше число, тем более размытой будет тень | |
| spread | Дополнительные. Радиус разворота. Положительное значение увеличивает размер тени, отрицательное значение уменьшает размер тени | |
| color | Дополнительные. Цвет тени. Значением по умолчанию является цвет текста. Посмотрите на значения цвета CSS для полного списка возможных значений цвета. Примечание: В Safari (на ПК) параметр Color является обязательным. Если цвет не указан, тень не отображается вовсе. |
|
| inset | Дополнительные. Изменяет тень от внешней тени (вначале) на внутреннюю тень | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Совет: ПодроБнее о допустимых значениях (единицы измерения длины CSS)
Другие примеры
Пример
Добавьте эффект размытия в тень:
#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;
}
Пример
Добавьте ключевое слово вставки:
#example1 {
box-shadow: 5px 10px inset;
}
Пример
Изображения, брошенные на стол. В этом примере демонстрируется создание снимков «Polaroid» и поворот рисунков:
div.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid
#BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
Похожие страницы
CSS Справочник: CSS Rounded Corners
HTML DOM Справочник: boxShadow Свойство