p ( text-shadow: 1px 1px 1px #000; )Sie können mehrere Textschatten anwenden, indem Sie durch Kommas trennen
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Die ersten beiden Werte geben die Länge des Schattenversatzes an. Der erste Wert gibt den horizontalen Abstand und der zweite den vertikalen Abstand des Schattens an. Der dritte Wert gibt den Unschärferadius an und der letzte Wert beschreibt die Farbe des Schattens:
1. Wert = Die X-Koordinate
2. Wert = Die Y-Koordinate
3. Wert = Der Unschärferadius
4. Wert = Die Farbe des Schattens
Wenn Sie positive Zahlen als erste beiden Werte verwenden, platzieren Sie den Schatten horizontal rechts vom Text (erster Wert) und den Schatten vertikal unter dem Text (zweiter Wert).
Der dritte Wert, der Unschärferadius, ist ein optionaler Wert, der angegeben werden kann, aber nicht muss. Es ist die Anzahl der Pixel, die der Text gedehnt wird, was einen Unschärfeeffekt verursacht. Wenn Sie den dritten Wert nicht verwenden, wird er so behandelt, als hätten Sie einen Unschärferadius von Null angegeben.
Denken Sie auch daran, dass Sie RGBa- oder HSLa-Werte für die Farbe verwenden können, z. B. eine Weißtransparenz von 40%:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Beispiele
Siehe die Beispiele für Stiftkomplextextschatten von Chris Coyier (@chriscoyier) auf CodePen.
Mehr Informationen
- MDN Docs
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3.5+ | 9,5+ | 10+ | irgendein | irgendein |