p ( text-shadow: 1px 1px 1px #000; )Вы можете применить несколько текстовых теней, разделив их запятыми.
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Первые два значения определяют длину смещения тени. Первое значение определяет горизонтальное расстояние, а второе определяет вертикальное расстояние тени. Третье значение определяет радиус размытия, а последнее значение описывает цвет тени:
1. значение = координата X
2. значение = координата Y
3. значение = радиус размытия
4. значение = цвет тени
Использование положительных чисел в качестве первых двух значений приводит к размещению тени справа от текста по горизонтали (первое значение) и размещению тени под текстом по вертикали (второе значение).
Третье значение, радиус размытия, - это необязательное значение, которое можно указать, но не обязательно. Это количество пикселей, на которое растягивается текст, что вызывает эффект размытия. Если вы не используете третье значение, оно обрабатывается так, как если бы вы указали нулевой радиус размытия.
Также помните, что вы можете использовать значения RGBa или HSLa для цвета, например, 40% прозрачность белого:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Примеры
См. Примеры Pen Complex Text Shadow от Криса Койера (@chriscoyier) на CodePen.
Дополнительная информация
- Документы MDN
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3.5+ | 9.5+ | 10+ | любой | любой |