Свойство 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>

Читайте также