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

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

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

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

Синтаксис

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

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

Значения

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

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

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-text-decor-3/#text-shadow-property

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

Примеры

HTML Результат

htmlCodes

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

	<style>
	
		p{
		width: 300px;
		height: 100px;
		margin: 3em;
		padding: 1em;
		border: solid 1px black;
		}
		
		.p_1{
		text-shadow: 2px 2px 3px blue;
        }
		
		.p_2{
		text-shadow: 2px 2px 5px blue,
					5px 5px 8px green,
					10px 10px 15px red;
		}
		
	</style>
	
</head>
<body>

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

Пример №1