p ( text-shadow: 1px 1px 1px #000; )Voit käyttää useita tekstivarjoja pilkulla erottamalla
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Kaksi ensimmäistä arvoa määrittävät varjoeron pituuden. Ensimmäinen arvo määrittää vaakasuoran etäisyyden ja toinen määrittää varjon pystysuoran etäisyyden. Kolmas arvo määrittää epätarkkuuden säteen ja viimeinen arvo kuvaa varjon värin:
1. arvo = X-koordinaatti
2. arvo = Y-koordinaatti
3. arvo = sumennussäde
4. arvo = varjon väri
Positiivisten numeroiden käyttäminen kahtena ensimmäisenä arvona johtaa varjon asettamiseen tekstin oikealle puolelle vaakasuoraan (ensimmäinen arvo) ja varjon asettamiseen tekstin alapuolelle pystysuoraan (toinen arvo).
Kolmas arvo, sumennussäde, on valinnainen arvo, joka voidaan määrittää, mutta ei tarvitse. Se on pikselimäärä, jonka teksti on venytetty, mikä aiheuttaa epätarkkuuden. Jos et käytä kolmatta arvoa, sitä käsitellään ikään kuin olisit määrittänyt nollasäteen.
Muista myös, että voit käyttää väreissä RGBa- tai HSLa-arvoja, esimerkiksi 40%: n valkoisen läpinäkyvyyttä:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Esimerkkejä
Katso Chris Coyierin (@chriscoyier) kynän monimutkaisia tekstivarjostimia CodePenistä.
Lisää tietoa
- MDN-dokumentit
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3,5+ | 9,5+ | 10+ | minkä tahansa | minkä tahansa |