Savybė text-shadow

Savybė text-shadow nustato teksto šešėlį. Kaip reikšmę savybė priima 4 parametrus, išvardintus per tarpą, arba raktinį žodį none, kuris visiškai panaikina šešėlį (tai yra numatytoji reikšmė).

Sintaksė

cssselektorius {
  text-shadow: poslinkis_x poslinkis_y išsiliejimas spalva;
}

cssselektorius {
  text-shadow: none;
}

Parametrai

Parametras	Aprašas
poslinkis x	Nustato šešėlio poslinkį išilgai X ašies. Teigiama reikšmė perkelia į dešinę, neigiama - į kairę.
poslinkis y	Nustato šešėlio poslinkį išilgai Y ašies. Teigiama reikšmė perkelia žemyn, neigiama - aukštyn.
išsiliejimas	Nustato šešėlio išsiliejimą. Kuo didesnė reikšmė - tuo labiau išsilietęs bus šešėlis. Neprivalomas parametras. Jei nenurodytas - šešėlis bus aiškus.
spalva	Nustato šešėlio spalvą bet kokiame spalvų vienetų formate. Neprivalomas parametras. Jei nenurodytas - šešėlio spalva sutampa su teksto spalva.

Poslinkiai išilgai ašių ir išsiliejimas nurodomi bet kokiame dydžių vienetų formate, išskyrus procentus.

Pavyzdys

Perkelkime šešėlį žemyn ir į kairę bei pridėkime nedidelį išsiliejimą:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 5px 5px 3px black;
}

Результат:

Pavyzdys . Aiškus šešėlis

Dabar padarykime raudonos spalvos šešėlį, perkelsime jį žemyn ir į kairę, bet pašalinsime išsiliejimą - šešėlis bus aiškus:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 10px 10px red;
}

Результат:

Pavyzdys . Tolygus šešėlis

Dabar šešėlis neperkeltas, bet jam pridėtas išsiliejimas:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 0px 0px 3px black;
}

Результат:

Taip pat žiūrėkite

savybė box-shadow,
kuri nustato konteinerio šešėlį