CSS teksta ēna - CSS-triki

Anonim

Regulāra teksta ēna:

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

Vairākas ēnas:

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

Pirmās divas vērtības norāda ēnas nobīdes garumu. Pirmā vērtība norāda horizontālo attālumu, bet otrā - ēnas vertikālo attālumu. Trešā vērtība norāda izplūduma rādiusu, un pēdējā vērtība raksturo ēnas krāsu:

1. vērtība = X koordināta
2. vērtība = Y koordināta
3. vērtība = izplūduma rādiuss
4. vērtība = ēnas krāsa

Izmantojot pozitīvos skaitļus kā pirmās divas vērtības, ēna tiek novietota pa labi no teksta horizontāli (pirmā vērtība) un ēna tiek novietota zem teksta vertikāli (otrā vērtība).

Trešā vērtība, izplūduma rādiuss, ir izvēles vērtība, kuru var norādīt, bet nav obligāti. Tas ir teksta izstiepto pikseļu daudzums, kas izraisa izplūšanas efektu. Ja neizmantojat trešo vērtību, tas tiek uzskatīts par tādu, it kā norādītu nulles aizmiglojuma rādiusu.

Atcerieties arī, ka krāsai varat izmantot RGBA vērtības, piemēram, 40% baltas krāsas caurspīdīgumu:

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