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 от Chris Coyier (@chriscoyier) на CodePen.
Повече информация
- MDN Документи
Поддръжка на браузър
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3,5+ | 9,5+ | 10+ | всякакви | всякакви |