Свойство 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>Читайте также
Свойство text-emphasis-color
Устанавливает цвет маркеров, отображаемых с помощью свойства text-emphasis-style.
Свойство background-repeat
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства backgroun...
Свойство max-height
Устанавливает максимальную высоту элемента.<br><br>Значение высоты элемента будет выч...
Свойство counter-reset
Устанавливает переменную, в которой будет храниться счётчик отображений определенного элемента, а...
Свойство border-top-right-radius
Устанавливает радиус скругления правого нижнего угла рамки.<br>Если рамка не задана, то скр...