p ( text-shadow: 1px 1px 1px #000; )Vesszővel elválasztva több szöveges árnyékot is alkalmazhat
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Az első két érték az árnyékeltolás hosszát határozza meg. Az első érték határozza meg a vízszintes távolságot, a második pedig az árnyék függőleges távolságát. A harmadik érték meghatározza az elmosódási sugarat, az utolsó pedig az árnyék színét:
1. érték = az X koordináta
2. érték = az Y koordináta
3. érték = az elmosódási sugár
4. érték = az árnyék színe
A pozitív számok első két értékként történő felhasználásával az árnyékot vízszintesen helyezzük el a szövegtől jobbra (első érték), és az árnyékot függőlegesen a szöveg alá.
A harmadik érték, az elmosódási sugár opcionális érték, amelyet meg lehet adni, de nem kell. Ez az a pixel, amelyet a szöveg kifeszít, ami elmosódást okoz. Ha nem használja a harmadik értéket, úgy kezeljük, mintha nulla elmosódási sugarat adna meg.
Ne feledje, hogy RGBa vagy HSLa értékeket is használhat a színhez, például a fehér 40% -os átlátszósága:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Példák
Lásd Chris Coyier (@chriscoyier) tollkomplex szöveges árnyék példáit a CodePen-en.
Több információ
- MDN Docs
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3,5+ | 9.5+ | 10+ | Bármi | Bármi |