CSS свойство box-shadowcss3

CSS свойства

Определение и применение

CSS свойство box-shadowcss3 добавляет одну или несколько теней к элементу. Для указания нескольких теней необходимо добавить дополнительное значение тени /-ей, разделенных запятыми.

Используя CSS свойство border-radiuscss3, вы можете получить тень с закругленными углами. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху), этот принцип используется и у свойства text-shadowcss3.

Схема работы свойства CSS - border-radius

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
box-shadowcss310.0
4.0
-webkit-
4.0
3.5
-moz-
10.55.1
3.1
-webkit-
9.012.0

CSS синтаксис:

box-shadow:"none| inset h-shadow v-shadow blur-radius spread-radius color | initial | inherit";

JavaScript синтаксис:

object.style.boxShadow = "10px 5px 5px red"

Значения свойства

ЗначениеОписание
noneТень не отображается. Это значение по умолчанию.
insetНеобязательное значение. Если это значение не указано (по умолчанию), то тень будет снаружи элемента и создаст эффект выпуклости элемента. При наличии ключевого слова (значения) inset, тень будет падать внутри элемента и создаст эффект вдавленности. Другими словами, это изменение от наружной тени к внутренней.
h-shadowОбязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений.
v-shadowОбязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений.
blur-radiusНеобязательное значение. Задаёт радиус размытия. Чем больше это значение, тем больше размытие, при этом тень становится больше и светлее. Если значение не задано, то значение будет равно 0 (резкие - отчетливые тени). Отрицательные значения не допускаются.
spread-radiusНеобязательное значение. Размер тени (радиус растяжения тени). При положительных значениях тень будет расширяться, а при отрицательных сжиматься. Если значение не задано, то значение будет равно 0 (тень соответствует размеру элемента).
colorНеобязательное значение. Определяет цвет тени (HEX, RGB, RGBA, HSL, HSLA, "Предопределённые цвета"). Значением по умолчанию является черный цвет.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Тени элемента на CSS</title>
<style> 
div {
display: inline-block;  /*  устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку)  */
margin: 30px;  /* устанавливаем внешний отступ для всех сторон */
} 
.test {
width: 250px; /* устанавливаем ширину блока */
height: 50px;  /* устанавливаем высоту блока */
box-shadow:  /* устанавливаем 4 внешних тени для элемента */
20px 15px 30px yellow,
-20px 15px 30px green,
-20px -15px 30px blue,
20px -15px 30px red;
} 
.test2 {
width: 250px; /* устанавливаем ширину блока */
height: 50px;  /* устанавливаем высоту блока */
box-shadow:  /* устанавливаем 4 внешних тени для элемента */
-15px -15px 2px -5px rgba(0,0,255,.5),
-15px 15px 2px -5px rgba(0,255,255,.5),
15px -15px 2px -5px rgba(255,0,0,.5),
15px 15px 2px -5px rgba(255,255,0,.5);
} 
.test3 {
width: 253px; /* устанавливаем ширину блока под размер изображения */
height: 199px;  /* устанавливаем высоту блока под размер изображения */
background-image: url(manul.jpg);  /* задаем фоновое изображение для элемента */
box-shadow: inset 0px 0px 50px 10px red;  /* устанавливаем внутреннюю тень для элемента(inset) без смещения с размытием 50px и размером 10px красного цвета */
} 
.test4 {
width: 253px; /* устанавливаем ширину блока под размер изображения */
height: 199px;  /* устанавливаем высоту блока под размер изображения */
background-image: url(manul.jpg);  /* задаем фоновое изображение для элемента */
box-shadow: 0px 0px 50px 10px forestgreen; /* устанавливаем внешнюю тень для элемента без смещения с размытием 50px и размером 10px зеленого(лесного) цвета */
} 
</style>
</head>
	<body>
		<div class = "test"></div>
		<div class = "test2"></div><br>
		<div class = "test3"></div>
		<div class = "test4"></div>
	</body>
</html>
Пример добавления теней к элементу в CSS (свойство box-shadow).
Пример добавления теней к элементу в CSS (свойство box-shadow).
CSS свойства