CSS Text Shadow - CSS-Tricks

Anonim

Umbra regulată a textului:

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

Umbre multiple:

p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )

Primele două valori specifică lungimea decalării umbrelor. Prima valoare specifică distanța orizontală și a doua specifică distanța verticală a umbrei. A treia valoare specifică raza de estompare, iar ultima valoare descrie culoarea umbrei:

1. valoare = coordonata X
2. valoare = coordonata Y
3. valoare = raza de estompare
4. valoare = culoarea umbrei

Utilizarea numerelor pozitive ca primele două valori se termină cu plasarea umbrei în dreapta textului pe orizontală (prima valoare) și plasarea umbrei sub text pe verticală (a doua valoare).

A treia valoare, raza de estompare, este o valoare opțională care poate fi specificată, dar nu trebuie. Este cantitatea de pixeli pe care textul este întins, ceea ce provoacă un efect de estompare. Dacă nu utilizați a treia valoare, este tratată ca și când ați specifica o rază de estompare de zero.

De asemenea, nu uitați că puteți utiliza valorile RGBA pentru culoare, de exemplu, o transparență de 40% a albului:

p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )