Egenskapen text-shadow

Egenskapen text-shadow sätter en skugga på text. Som värde tar egenskapen 4 parametrar, uppräknade med mellanslag, eller nyckelordet none, som tar bort skuggan helt (detta är standardvärdet).

Syntax

cssselector {
  text-shadow: förskjutning_x förskjutning_y oskärpa färg;
}

cssselector {
  text-shadow: none;
}

Parametrar

Parameter	Beskrivning
förskjutning x	Sätter förskjutningen av skuggan längs X-axeln. Ett positivt värde flyttar åt höger, ett negativt värde - åt vänster.
förskjutning y	Sätter förskjutningen av skuggan längs Y-axeln. Ett positivt värde flyttar nedåt, ett negativt värde - uppåt.
oskärpa	Sätter oskärpan på skuggan. Ju högre värde - desto mer oskarp blir skuggan. Frivillig parameter. Om den inte anges blir skuggan skarp.
färg	Sätter skuggans färg i valfria färgenheter. Frivillig parameter. Om den inte anges har skuggan samma färg som texten.

Förskjutningar längs axlarna och oskärpa anges i valfria längdenheter, förutom procent.

Exempel

Låt oss flytta skuggan nedåt och åt vänster och lägga till lite oskärpa:

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

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

Результат:

Exempel . Skarp skugga

Nu gör vi skuggan röd, flyttar den nedåt och åt vänster, men tar bort oskärpan - skuggan blir skarp:

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

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

Результат:

Exempel . Enhetlig skugga

Skuggan är nu inte förskjuten, men den har oskärpa:

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

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

Результат:

Se även

egenskapen box-shadow,
som sätter skugga på en container