CSS стиль box-shadow. Тень у элемента с помощью box-shadow
CSS стиль box-shadow добавляет тень к элементу. Возможно использовать несколько теней, указывая их параметры через запятую, при этом каждая последующая тень будет ниже предыдущей.
Краткая информация по CSS-свойству box-shadow
| Значение по умолчанию | none |
|---|
| Наследуется | Нет |
|---|
| Применяется | Ко всем элементам |
|---|
Правила написания CSS-стиля box-shadow
box-shadow: none | <тень> [,<тень>]
где <тень> - выражение вида:
inset <x> <y> <размытие> <растяжение> <цвет>
none - Отменяет добавление тени.
inset - Тень выводится внутри элемента. Необязательный параметр.
x - Смещение тени по горизонтали относительно элемента. Положительная величина задает сдвиг тени вправо, отрицательная — влево. Обязательный параметр.
y - Смещение тени по вертикали относительно элемента. Положительная величина задает сдвиг тени вниз, отрицательная — вверх. Обязательный параметр.
размытие - Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, то тень будет четкой, не размытой.
растяжение - Положительная величина растягивает тень, отрицательная - сжимает. Если этот параметр не задан, то тень будет того же размера, что и элемент.
цвет - Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.
Допускается указывать несколько теней, разделяя их параметры между собой запятой, при этом первая тень в списке размещается на самом верху, а последняя — в самом низу.
Пример применения стиля box-shadow
Проиллюстрируем работу box-shadow на примере выпадающего окна. Наша задача сделать объемный попап. Вот как это можно сделать:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тени с помощью box-shadow</title>
<style>
.shadow {
background: #fc0; /* Цвет фона */
box-shadow: 0 0 10px #00bff3; /* Параметры тени */
padding: 10px;
}
</style>
</head>
<body>
<div class="shadow">Все условия выполнены!</div>
</body>
</html>
Применение тени box-shadow