Больше "Try it Yourself" примеры ниже.
Определение и использование
Текст-тень свойство добавляет тень к тексту.
Это свойство принимает разделенный запятыми список теней, которые будут применены к тексту.
| Значение по умолчанию: | none |
|---|---|
| Наследование: | yes |
| Animatable: | yes. Read about animatable Try it |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.textShadow="2px 5px 5px red" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| 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;Note: Для того, чтобы добавить более одной тени к тексту, добавьте список разделенных запятыми теней.
Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| h-shadow | Необходимые. Положение горизонтальной тени. Отрицательные значения разрешены | Сыграй " |
| v-shadow | Необходимые. Положение вертикальной тени. Отрицательные значения разрешены | Сыграй " |
| blur-radius | Необязательный. Радиус размытия. Значение по умолчанию равно 0 | Сыграй " |
| color | Необязательный. Цвет тени. Посмотрите на CSS Цвет Значения для полного списка возможных значений цвета | Сыграй " |
| none | Значение по умолчанию. Нет тени | Сыграй " |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | Сыграй " |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
пример
Этот пример демонстрирует, текстовую тень с эффектом размытия:
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;
} Попробуй сам " Похожие страницы
CSS3 учебник: CSS3 Текстовые эффекты
HTML DOM ссылка: textShadow property