Ominaisuus text-shadow

Ominaisuus text-shadow asettaa tekstille varjon. Arvona ominaisuus ottaa 4 parametriä, lueteltuna välilyönnillä erotettuna, tai avainsanan none, joka poistaa varjon kokonaan (tämä on oletusarvo).

Syntaksi

cssvalitsin {
  text-shadow: siirto_x:ssä siirto_y:ssä sumeus väri;
}

cssvalitsin {
  text-shadow: none;
}

Parametrit

Parametri	Kuvaus
siirto x:ssä	Asettaa varjon siirron X-akselilla. Positiivinen arvo siirtää oikealle, negatiivinen - vasemmalle.
siirto y:ssä	Asettaa varjon siirron Y-akselilla. Positiivinen arvo siirtää alas, negatiivinen - ylös.
sumeus	Asettaa varjon sumeuden. Mitä suurempi arvo - sitä sumeampi varjo on. Valinnainen parametri. Jos ei aseteta - varjo on terävä.
väri	Asettaa varjon värin millä tahansa väriyksiköllä. Valinnainen parametri. Jos ei aseteta - varjon väri on sama kuin tekstin väri.

Siirrot akseleilla ja sumeus asetetaan millä tahansa kokoyksiköllä, prosentteja lukuun ottamatta.

Esimerkki

Siirretään varjoa alas ja vasemmalle ja lisätään pieni sumeus:

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

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

Результат:

Esimerkki . Terävä varjo

Tehdään nyt varjosta punainen, siirretään sitä alas ja vasemmalle, mutta poistetaan sumeus - varjo on terävä:

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

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

Результат:

Esimerkki . Tasainen varjo

Nyt varjoa ei ole siirretty, mutta siihen on lisätty sumeus:

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

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

Результат:

Katso myös

ominaisuus box-shadow,
joka asettaa varjon kontille