Свойство box-shadow
Описание
Добавляет тень к элементу.
Разрешено использовать несколько теней, указывая их через запятую.
Синтаксис
box-shadow: none | inset сдвиг по x сдвиг по y размытие растяжение цвет;Подробности
| Значение | Описание |
| none | Отключает добавление тени. |
| inset | Внутренняя тень. |
| сдвиг по x | Смещение тени по горизонтали относительно элемента. Положительное значение задаёт сдвиг тени вправо, отрицательное — влево. |
| сдвиг по y | Смещение тени по вертикали относительно элемента. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. |
| размытие | Радиус размытия тени. Чем больше значение, тем сильнее тень сглаживается, становится светлее и шире. |
| растяжение | Положительное значение растягивает тень, отрицательное - сжимает. |
| цвет | Цвет тени. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#box-s {
width: 200px;
height: 100px;
background-color: #93f7aab7;
border: 2px solid black;
box-shadow: 3px 10px 30px rgb(0, 0, 0);
padding: 10px;
}
</style>
<div id='box-s'></div>
</body>
</html>Читайте также
Мультилассы
К любому элементу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется сти...
Селекторы атрибутов со значениями
Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута....
Стиль элемента при наведении на него курсора мыши
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата....
Свойство border-bottom-width
Устанавливает толщину границы внизу элемента....