English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Текстовая тень CSS-свойство применяет один или несколько эффектов текстовой тени к текстовому содержимому элемента. Каждый эффект текстовой тени должен указывать смещение тени, и можно указать радиус размытия и цвет тени.
В таблице приведены примеры использования и история версий этого свойства, а также его использование в скриптах JavaScript.
| Значение по умолчанию: | none |
|---|---|
| Поддерживается: | Все элементы. Также применяется к ::first-letter и ::first-line. |
| Инheritability: | Да |
| Анимация возможна: | Да.См. также Анимационные свойства. |
| Версия: | Новая функция CSS3 |
| JavaScript синтаксис: | объект.style.textShadow="2px 2px #ff0000" |
Эффект текстовой тени применяется в порядке, указанном в спецификации, поэтому он может перекрываться, но никогда не перекрывать сам текст.
После значения смещения тени можно указать радиус размытия; это значение длины,代表着模糊效果的大小.
Цвет тени можно указать перед или после значения смещения. Если цвет тени не указан, то будет использоваться CSS colorЗначение свойства.
Грамматика этого атрибута выглядит следующим образом:
text-shadow: shadow1 [, shadow2, ... shadowN] | none | inherit where shadow is: [offset-x offset-y blur-radius color]
Ниже приведены примеры того, как использовать атрибут text-shadow.
h1 {
text-shadow: 2px 2px 5px #000;
}
p {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}Протестируйте, посмотрите‹/›Примечание:Если два значения смещения тени установлены в 0, то тень будет помещена за текстом, и при указании радиуса размытия может возникнуть эффект размытия.
В таблице ниже описаны значения этого атрибута.
| Значение | Описание |
|---|---|
| Обязателен -Необходимо указать следующие значения для атрибута. | |
| h-shadow | Обязателен. Горизонтальное положение тени. Разрешены отрицательные значения. |
| v-shadow | Обязателен. Вертикальное положение тени. Разрешены отрицательные значения. |
| Опционально -Следующие значения являются опциональными. | |
| blur | Указать размер размытия. |
| color | Указать цвет тени.Цветовые значения CSSдля получения списка возможных значений цветов. |
| inherit | Если указано, то связанный элемент использует значение text-shadow родительского элемента. |
Совместимость браузеров для атрибута text-shadow, числа в таблице указывают на минимальную версию браузера, поддерживающего этот атрибут; все основные браузеры поддерживают этот атрибут.
|
Внимание: Microsoft Internet Explorer 7 и более ранние версии не поддерживают наследование значений. IE8 поддерживает наследование, но требует<!DOCTYPE>. Поддержка наследования в IE9.
См. также следующие руководства:CSS Text.
Атрибуты, связанные с текстом:letter-spacing,text-align,text-decoration,text-indent,text-overflow,text-transform,white-space,word-spacing.