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