text-shadow
CSS-свойство text-shadow
добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations
. Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.
Интерактивный пример
Syntax
/* смещение-x | смещение-y | радиус-размытия | цвет */
text-shadow: 1px 1px 2px black;
/* цвет | смещение-x | смещение-y | радиус-размытия */
text-shadow: #fc0 1px 0 10px;
/* смещение-x | смещение-y | цвет */
text-shadow: 5px 5px #558abb;
/* цвет | смещение-x | смещение-y */
text-shadow: white 2px 5px;
/* смещение-x | смещение-y
/* Используем значения по умолчанию для цвета и радиуса-размытия */
text-shadow: 5px 10px;
/* Глобальные значения */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
Это свойство определено как разделённый запятыми список теней.
Каждая тень определена как два или три значения <длина>
, за которыми следует необязательное значение <цвет>
. Первые два значения <длина>
определяют параметры <смещение-x>
и <смещение-y>
. Третье необязательное значение <длина> задаёт
<радиус-размытия>
. Значение <цвет>
определяет цвет тени.
Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.
Это свойство можно применить к псевдо-элементам ::first-line
и ::first-letter
.
Значения
<цвет>
-
Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется определить значение цвета явно.
<смещение-x> <смещение-y>
-
Обязательные. Эти величины
<длина>
задают расстояние тени от текста.<смещение-x>
определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста.<смещение-y>
определяет вертикальное расстояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в0
, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта<радиус-размытия>
. <радиус-размытия>
-
Необязательный. Это величина
<длина>
. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию0
, в случае когда параметр не определён.
Формальный синтаксис
Примеры
Простая тень
.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>
Спецификации
Specification |
---|
CSS Text Decoration Module Level 3 # text-shadow-property |
Начальное значение | none |
---|---|
Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
Наследуется | да |
Обработка значения | цвет плюс три абсолютных длины |
Animation type | список теней |
Совместимость с браузерами
BCD tables only load in the browser
Примечание Quantum CSS
- В движке Gecko есть программная ошибка в результате которой метод перехода (
transition
) не будет производить переход от элемента со свойствомtext-shadow
с заданным цветом к элементу со свойствомtext-shadow
без заданного цвета (Firefox bug 726550). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как Quantum CSS или Stylo, выпуск которого запланирован уже в версии Firefox 57).
Также смотрите
- Text Shadow CSS Generator - Интерактивный генератор теней CSS.
box-shadow
- Тип данных
<color>
(для определения цвета теней) - Определение цвета для элемента HTML посредством CSS