CSS :: Свойство box-shadow

css-свойство box-shadow (от англ. box shadow – тень блока) создает одну или несколько теней элемента. Если теней несколько, их значения должны перечисляться через запятую.

Характеристики

Значение по умолчанию: none.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.boxShadow="value".

Синтаксис

box-shadow: none | <тень>[, <тень>]*, где

<тень> = inset <смещение x> <смещение y> <размытие> <растяжение> <цвет>

Значения

смещение x – обязательный параметр, который в случае положительных значений смещает тень относительно элемента по горизонтали вправо, а в случае отрицательных значений – влево. Если значение параметра равно нулю, то смещение отсутствует.
смещение y – обязательный параметр, который в случае положительных значений смещает тень относительно элемента вверх, а в случае отрицательных значений – вниз. Если значение параметра равно нулю, то смещение отсутствует.
размытие – необязательный параметр, который устанавливает радиус размытия тени. Чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям. Если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром.
растяжение – необязательный параметр, который в случае положительного значения растягивает тень, а в случае отрицательного значения сжимает тень. Если же значение не будет установлено, то браузер по умолчанию установит растяжение равное нулю и тень будет иметь те же размеры, что и элемент.
цвет – определяет цвет тени. т.к. браузеры по умолчанию задают разный цвет тени, то желательно всегда задавать этот необязательный параметр.
inset – тень будет выводиться внутри элемента, при этом она будет располагаться над фоном, но под любым содержимым элемента. Данный параметр не является обязательным и может применяться как в качестве первого параметра, так и последнего в списке.
none – тень добавляться не будет (используется по умолчанию).

Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения (смотреть), а для указания цвета – любое допустимое в CSS его значение.

Если необходимо добавить сразу несколько теней, то они перечисляются через запятую. При этом первая тень в списке будет расположена на самом верху, а последняя — в самом низу.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/box-shadow

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		p{
		width: 300px;
		height: 100px;
		margin: 7em;
		}
		
		.p_1{
		border: solid 5px red;
		background-color: yellow;
		box-shadow: 10px 10px 50px 15px blue;
		}
		
		.p_2{
		border: solid 5px orange;
		background-color: violet;
		box-shadow: 5px 5px 8px 10px blue inset,
								10px 10px 8px 10px green,
								15px 15px 8px 10px red
		}
		
	</style>
	
</head>
<body>

	<p class="p_1">
		Одна тень.
	</p> 
	
	<p class="p_2">
		Несколько теней.
	</p>
	
</body>
</html>

Пример №1