CSS Text Shadow - CSS-tricks

Anonim

Vanlig textskugga:

p ( text-shadow: 1px 1px 1px #000; )

Flera skuggor:

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-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); )