p ( text-shadow: 1px 1px 1px #000; )Du kan anvende flere tekstskygger ved at adskille kommaet
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )De første to værdier angiver længden af skyggeforskydningen. Den første værdi angiver den vandrette afstand, og den anden angiver den lodrette afstand for skyggen. Den tredje værdi angiver sløringsradius, og den sidste værdi beskriver farven på skyggen:
1. værdi = X-koordinaten
2. værdi = Y-koordinaten
3. værdi = sløringsradius
4. værdi = Farven på skyggen
Brug af positive tal som de to første værdier ender med at placere skyggen til højre for teksten vandret (første værdi) og placere skyggen under teksten lodret (anden værdi).
Den tredje værdi, sløringsradius, er en valgfri værdi, som kan specificeres, men ikke behøver. Det er antallet af pixels, teksten strækkes, hvilket forårsager en sløringseffekt. Hvis du ikke bruger den tredje værdi, behandles det som om du angav en sløringsradius på nul.
Husk også, at du kan bruge RGBa- eller HSLa-værdier til farven, for eksempel en gennemsigtighed på 40% af hvid:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Eksempler
Se eksempler på pen-kompleks tekstskygge af Chris Coyier (@chriscoyier) på CodePen.
Mere information
- MDN Docs
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3.5+ | 9.5+ | 10+ | nogen | nogen |