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

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

selector {
	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:

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

#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:

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

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

Exempel . Enhetlig skugga

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

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

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

Se även

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