Свойство 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>Читайте также
Свойство padding-block-start
Определяет начальный внутренний отступ элемента по блочной оси. В зависимости от значения свойств...
Свойство padding-right
Устанавливает расстояние от внутреннего правого края рамки элемента до воображаемого прямоугольника.
Функция radial-gradient()
Функция добавляет радиальный градиент к фону элемента. Радиальные по своему принципу похожи на ли...
Свойство list-style-position
Указывает, как будет размещаться маркер относительно текста — маркер обтекается текстом или вынес...
Свойство grid-row-start
Определяет местоположение в сетке ссылаясь на конкретные линии. <br>grid-row-start / grid-r...