p ( text-shadow: 1px 1px 1px #000; )Kableliais atskirdami galite pritaikyti kelis teksto šešėlius
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Pirmosios dvi reikšmės nurodo šešėlio poslinkio ilgį. Pirmoji reikšmė nurodo horizontalų atstumą, o antroji - vertikalų šešėlio atstumą. Trečioji vertė nurodo neryškumo spindulį, o paskutinė vertė apibūdina šešėlio spalvą:
1. vertė = X koordinatė
2. reikšmė = Y koordinatė
3. vertė = suliejimo spindulys
4. reikšmė = šešėlio spalva
Naudojant teigiamus skaičius kaip pirmąsias dvi vertes, šešėlis dedamas dešinėje nuo teksto horizontaliai (pirmoji vertė) ir šešėlis dedamas žemiau teksto vertikaliai (antroji vertė).
Trečioji vertė - suliejimo spindulys - yra neprivaloma reikšmė, kurią galima nurodyti, bet nereikia. Tai yra ištemptų pikselių kiekis, kuris sukelia suliejimo efektą. Jei nenaudosite trečios vertės, tai bus traktuojama taip, tarsi nurodytumėte nulio suliejimo spindulį.
Be to, nepamirškite, kad spalvai galite naudoti RGBa arba HSLa reikšmes, pavyzdžiui, 40% baltos spalvos skaidrumą:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Pavyzdžiai
Žr. Chriso Coyierio (@chriscoyier) rašiklių sudėtingų teksto šešėlių pavyzdžius „CodePen“.
Daugiau informacijos
- MDN dokumentai
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3,5 ir daugiau | 9,5+ | 10+ | bet koks | bet koks |