тень-текста

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Свойство text-shadow CSS добавляет тени к тексту. Оно принимает список теней, разделенных запятыми, которые применяются к тексту и любым его decorations. Каждая тень описывается некоторой комбинацией смещений X и Y от элемента, радиусом размытия и цветом.

Попробовать

Синтаксис

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: revert-layer;
text-shadow: unset;

Это свойство задается как список теней, разделенных запятыми.

Каждая тень задается как два или три <length> значения, необязательно после которых следует <color> значение. Первые два <length> значения являются <offset-x> и <offset-y> значениями. Третье, необязательное, <length> значение является <blur-radius> значением. <color> значение — цвет тени.

Когда задается несколько теней, они применяются спереди назад, причем первая заданная тень располагается сверху.

Это свойство применяется как к ::first-line, так и к ::first-letter псевдоэлементам.

Значения

<color>: Необязательно. Цвет тени. Его можно указать до или после значений смещения. Если он не указан, цвет определяется пользовательским агентом, поэтому при необходимости согласованности в работе браузеров следует указывать его явно.
<offset-x> <offset-y>: Обязательно. Эти <length> значения определяют расстояние тени от текста. <offset-x> определяет горизонтальное расстояние; отрицательное значение помещает тень слева от текста. <offset-y> определяет вертикальное расстояние; отрицательное значение помещает тень над текстом. Если оба значения 0, тень располагается непосредственно за текстом, хотя она может быть частично видна из-за эффекта <blur-radius>.
<blur-radius>: Необязательно. Это <length> значение. Чем выше значение, тем больше размытие; тень становится шире и светлее. Если не указано, по умолчанию используется 0.

Формальное определение

Начальное значение	`none`
Применяется к	всем элементам. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	цвет плюс три абсолютных длины
Тип анимации	список теней shadow list

Формальный синтаксис

text-shadow = 
  none                            |
  [ <color>? && <length>{2,3} ]#

Примеры

Простая тень

.red-text-shadow {
  text-shadow: red 0 -2px;
}

<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>

Несколько теней

.white-text-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    serif;
}

<p class="white-text-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>

Спецификации

Спецификация
CSS Text Decoration Module Level 3 # text-shadow-property

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`text-shadow`	2	12	3.5 ["В версиях Firefox до 57 существует ошибка, из-за которой `transition` не будут работать при переходе от `text-shadow` со значением цвета к `text-shadow` без указанного цвета (ошибка 726550).", "Начиная с Firefox 4, радиус размытия ограничен 300 для повышения производительности.", "Теоретически Firefox поддерживает бесконечные тени текста (не пытайтесь).", "Если значение `<color>` не указано, то Firefox использует значение свойства `color` элемента."]	9.5 ["Opera поддерживает максимум 6-9 теней текста для повышения производительности. Радиус размытия ограничен 100px.", "Opera 9.5 до 10.1 соответствует старому порядку отрисовки (в CSS2 первая заданная тень находится внизу)."]	1.1 ["В Safari любые тени, которые не указывают цвет явно, являются прозрачными.", "Safari 1.1 до 3.2 поддерживает только одну тень текста (отображает первую тень из списка, разделённого запятыми, и игнорирует остальные). Safari 4.0 (WebKit 528) и более поздние версии поддерживают несколько теней текста."]	18	4 ["В версиях Firefox до 57 существует ошибка, из-за которой `transition` не будут работать при переходе от `text-shadow` со значением цвета к `text-shadow` без указанного цвета (ошибка 726550).", "Начиная с Firefox 4, радиус размытия ограничен 300 для повышения производительности.", "Теоретически Firefox поддерживает бесконечные тени текста (не пытайтесь).", "Если значение `<color>` не указано, то Firefox использует значение свойства `color` элемента."]	14	1 ["В Safari любые тени, которые не указывают цвет явно, являются прозрачными.", "Safari iOS 1 и 2 поддерживают только одну тень текста (отображает первую тень из списка, разделённого запятыми, и игнорирует остальные). Safari iOS 3 (WebKit 528) и более поздние версии поддерживают несколько теней текста."]	1.0	37

См. также

Тип данных <color> (для указания цвета тени)
box-shadow
drop-shadow()

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow