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.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.