Egenskapen text-shadow

Egenskapen text-shadow setter skygge på tekst. Som verdi tar egenskapen 4 parametere, opplistet med mellomrom, eller nøkkelordet none, som fjerner skyggen helt (dette er standardverdien).

Syntaks

cssselector {
  text-shadow: forskyvning_x forskyvning_y uskarphet farge;
}

cssselector {
  text-shadow: none;
}

Parametere

Parameter	Beskrivelse
forskyvning x	Setter forskyvning av skyggen langs X-aksen. Positiv verdi forskyver til høyre, negativ - til venstre.
forskyvning y	Setter forskyvning av skyggen langs Y-aksen. Positiv verdi forskyver nedover, negativ - oppover.
uskarphet	Setter uskarpheten (blur) på skyggen. Jo høyere verdi - jo mer uskarp blir skyggen. Valgfri parameter. Hvis ikke satt - vil skyggen være skarp.
farge	Setter fargen på skyggen i alle enheter for farge. Valgfri parameter. Hvis ikke satt - vil skyggen ha samme farge som teksten.

Forskyvninger langs aksene og uskarphet settes i alle enheter for størrelser, unntatt prosent.

Eksempel

La oss forskyve skyggen nedover og til venstre og legge til litt uskarphet:

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

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

Результат:

Eksempel . Skarp skygge

La oss nå gjøre skyggen rød, forskyve den nedover og til venstre, men fjerne uskarpheten - skyggen vil være skarp:

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

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

Результат:

Eksempel . Uniform skygge

Nå er skyggen ikke forskyvet, men den har uskarphet lagt til:

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

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

Результат:

Se også

egenskapen box-shadow,
som setter skygge på en container