CSS-свойство text-shadow применяет один или несколько эффектов тени к текстовому содержимому элемента. Для эффекта обязательно должно быть указано смещение тени, а дополнительно можно указать радиус размытия и цвет тени.
| Значение по умолчанию: | none |
| Применяется к: | Все элементы. Это также относится к ::first-letter и ::first-line. |
| Наследование: | Да |
| Анимирование: | Да. Анимируемые свойства |
| Версия: | Новый в CSS3 |
- Эффекты тени будут применяться в указанном порядке и могут перекрывать друг друга, но они никогда не будут перекрывать сам текст.
- Радиус размытия может быть дополнительно указан после значения смещения тени; это значение представляет размер эффекта размытия.
- Значение цвета для тени можно указать до или после значения смещения. Если цвет тени не указан, вместо него будет использоваться значение CSS-свойства
color.
Синтаксис
Синтаксически свойства задаются по следующему шаблону:
text-shadow: shadow1 [, shadow2, ... shadowN] | none | inheritПримеры написания кода свойства text-shadow:
h1 {
text-shadow: 2px 2px 5px #000;
}
p {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}Если оба значения смещения тени установлены на 0, то тень помещается за текстом и может создавать эффект размытия, если указан радиус размытия (blur).
Значения свойств
В следующей таблице описаны значения этого свойства.
| Значение | Описание |
|---|---|
| Обязательно — должны быть указаны следующие значения. | |
| h-shadow | Определяет горизонтальное смещение тени справа от текста. Отрицательное значение смещает тень слева от текста |
| v-shadow | Определяет вертикальное смещение тени под текстом. Отрицательное значение вертикальной длины смещает тень над текстом |
| Опционально — следующие значения не обязательны. | |
| blur | Укажите размер размытия. |
| color | Указывает цвет тени. Список возможных форматов цвета см. в руководстве по CSS Color. |
inherit |
Если указан, связанный элемент принимает вычисленное значение своего родительского элемента text-shadow. |
Поддержка браузеров
Свойство text-shadow поддерживается во всех основных браузерах.
Internet Explorer 7 и более ранние версии не поддерживают значение inherit. IE8 поддерживает наследование, но требует <!DOCTYPE>. IE9 поддерживает inherit.
