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