Eienskap text-shadow

Die eienskap text-shadow stel 'n skaduwee vir teks. As waarde neem die eienskap 4 parameters aan, geskei deur spasies, of die sleutelwoord none, wat die skaduwee heeltemal kanselleer (dit is die standaardwaarde).

Sintaksis

cssselekteerder {
  text-shadow: verskuif_op_x verskuif_op_y vervaaging kleur;
}

cssselekteerder {
  text-shadow: none;
}

Parameters

Parameter	Beskrywing
verskuif op x	Stel die skaduweeverskuiwing op die X-as. 'n Positiewe waarde skuif na regs, 'n negatiewe waarde - na links.
verskuif op y	Stel die skaduweeverskuiwing op die Y-as. 'n Positiewe waarde skuif afwaarts, 'n negatiewe waarde - opwaarts.
vervaaging	Stel die skaduweevervaaging. Hoe groter die waarde - hoe meer vervaag die skaduwee sal wees. Opsionele parameter. Indien nie gespesifiseer nie - sal die skaduwee skerp wees.
kleur	Stel die skaduweekleur in enige eenhede vir kleur. Opsionele parameter. Indien nie gespesifiseer nie - val die skaduweekleur saam met die tekskleur.

Verskuiwings op die asse en vervaaging word gespesifiseer in enige eenhede vir groottes, behalwe persentasies.

Voorbeeld

Kom ons skuif die skaduwee af en links en voeg 'n bietjie vervaaging by:

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

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

Результат:

Voorbeeld . Skerp skaduwee

Laat ons nou die skaduwee rooi maak, dit af en links skuif, maar die vervaaging verwyder - die skaduwee sal skerp wees:

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

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

Результат:

Voorbeeld . Eenvormige skaduwee

Nou is die skaduwee nie geskuif nie, maar vervaaging is bygevoeg:

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

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

Результат:

Sien ook

die eienskap box-shadow,
wat 'n skaduwee vir 'n houer stel