p ( text-shadow: 1px 1px 1px #000; )Koma eraldades saate rakendada mitut tekstivarju
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Esimesed kaks väärtust määravad varju nihke pikkuse. Esimene väärtus määrab horisontaalse kauguse ja teine varju vertikaalse kauguse. Kolmas väärtus määrab hägususe raadiuse ja viimane väärtus kirjeldab varju värvi:
1. väärtus = X-koordinaat
2. väärtus = Y-koordinaat
3. väärtus = hägususraadius
4. väärtus = varju värv
Positiivsete arvude kasutamine kahe esimese väärtusena lõpeb varju asetamisega teksti paremale horisontaalselt (esimene väärtus) ja varju teksti all vertikaalselt (teine väärtus).
Kolmas väärtus, hägususraadius, on valikuline väärtus, mida saab määrata, kuid ei pea. See on teksti venitatud pikslite arv, mis põhjustab hägususe. Kui te ei kasuta kolmandat väärtust, käsitletakse seda nii, nagu oleksite määranud hägususraadiuse nulli.
Samuti pidage meeles, et saate värvi jaoks kasutada RGBa või HSLa väärtusi, näiteks valge läbipaistvus 40%:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Näited
Vaadake CodePenilt Chris Coyieri (@chriscoyier) pliiatsikompleksi tekstivarjundi näiteid.
Rohkem informatsiooni
- MDN-i dokumendid
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3,5+ | 9,5+ | 10+ | mis tahes | mis tahes |