p ( text-shadow: 1px 1px 1px #000; )Du kan använda flera textskuggor genom att separera med kommatecken
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )De första två värdena anger längden på skuggförskjutningen. Det första värdet anger det horisontella avståndet och det andra anger det vertikala avståndet för skuggan. Det tredje värdet anger suddighetsradien och det sista värdet beskriver skuggans färg:
1. värde = X-koordinaten
2. värde = Y-koordinaten
3. värde = Suddighetsradien
4. värde = Skuggans färg
Att använda positiva tal som de två första värdena slutar med att placera skuggan till höger om texten horisontellt (första värdet) och placera skuggan under texten vertikalt (andra värdet).
Det tredje värdet, suddighetsradien, är ett valfritt värde som kan anges men inte behöver. Det är mängden pixlar som texten sträcks ut som orsakar en suddighetseffekt. Om du inte använder det tredje värdet behandlas det som om du angav en suddighetsradie på noll.
Kom också ihåg att du kan använda RGBa- eller HSLa-värden för färgen, till exempel en 40% transparens av vitt:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Exempel
Se Pen Complex Text Shadow Exempel av Chris Coyier (@chriscoyier) på CodePen.
Mer information
- MDN-dokument
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3,5+ | 9,5+ | 10+ | några | några |