CSS - свойство box-shadow
Пример
Добавьте тени к различным элементам <div>:
#example1 {
box-shadow: 5px 10px;
}
#example2 {
box-shadow:
5px 10px #888888;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство box-shadowприкрепляет к элементу одну или несколько теней.
| Значение по умолчанию: | никто |
|---|---|
| Унаследовано: | нет |
| Анимация: | да. Читать об анимации |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.boxShadow="10px 20px 30px синий" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
| Property | |||||
|---|---|---|---|---|---|
| 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;
Примечание. Чтобы прикрепить к элементу несколько теней, добавьте список теней, разделенных запятыми (см. пример «Попробуйте сами» ниже).
Значения свойств
| Value | Description | Play it |
|---|---|---|
| none | Default value. No shadow is displayed | |
| h-offset | Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box | |
| v-offset | Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box | |
| blur | Optional. The blur radius. The higher the number, the more blurred the shadow will be | |
| spread | Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow | |
| color | Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. |
|
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about 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;
}
Пример
Образы, брошенные на стол. В этом примере показано, как создавать изображения «поляроид» и вращать изображения:
div.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid
#BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
Связанные страницы
Учебное пособие по CSS: CSS Box Shadow
Справочник по HTML DOM: свойство boxShadow