CSS text-shadow Свойство
Пример
Базовый текст-тень:
h1
{
text-shadow: 2px 2px #ff0000;
}
Подробнее примеры ниже.
Определение и использование
Свойство text-shadow
добавляет тень к тексту.
Это свойство принимает разделенный запятыми список теней, которые будут применены к тексту.
Значение по умолчанию: | none |
---|---|
Inherited: | yes |
Animatable: | yes. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.textShadow="2px 5px 5px red" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
Синтаксис CSS
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Примечание: Чтобы добавить в текст более одной тени, добавьте список теней с разделителями-запятыми.
Значения свойств
Значение | Описание | |
---|---|---|
h-shadow | Обязательно. Положение горизонтальной тени. Допустимы отрицательные значения | |
v-shadow | Обязательно. Положение вертикальной тени. Допустимы отрицательные значения | |
blur-radius | Дополнительные. Радиус размытия. Значение по умолчанию — 0 | |
color | Дополнительные. Цвет тени. Посмотрите на значения цвета CSS для полного списка возможных значений цвета | |
none | Значение по умолчанию. Без тени | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Text-тень с эффектом размытия:
h1 {
text-shadow: 2px 2px 8px #FF0000;
}
Пример
Текст-тень на белом тексте:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Пример
Текст-тень с красным неоновым свечением:
h1 {
text-shadow: 0 0 3px #FF0000;
}
Пример
Текст-тень с красным и синим неоновым свечением:
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Похожие страницы
CSS Справочник: CSS Text Effects
HTML DOM Справочник: textShadow Свойство