Funktionen drop-shadow
Funktionen drop-shadow låter dig
lägga till en skugga till en bakgrundsbild.
Syntax
selektor {
filter: drop-shadow(förskjutning x, förskjutning y, oskärperadius, färg);
}
Värden
| Värde | Beskrivning |
|---|---|
| förskjutning x | Skuggans förskjutning i horisontell led relativt bakgrunden. Ett positivt tal betyder att skuggan förskjuts åt höger, ett negativt - åt vänster. Obligatorisk parameter. |
| förskjutning y | Skuggans förskjutning i vertikal led relativt bakgrunden. Ett positivt tal betyder att skuggan förskjuts nedåt, ett negativt - uppåt. Obligatorisk parameter. |
| oskärpa |
Sätter skuggans oskärperadius.
Ju högre värde, desto mer oskarp blir skuggan.
Frivillig parameter. Som standard
är den 0.
|
| färg | Skuggans färg. Frivillig parameter. Som standard sätts skuggans färg till svart. |
Exempel
Låt oss sätta en blå skugga för vår bild
utan förskjutning längs axlarna, med en oskärpa på 5px:
<div id="elem"></div>
#elem {
filter: drop-shadow(0 0 5px #035470);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Se även
-
funktionen
blur,
som oskärpar bakgrunden -
funktionen
brightness,
som sätter ljusstyrkan för bakgrunden -
funktionen
contrast,
som sätter kontrasten för bakgrunden -
funktionen
hue-rotate,
som sätter nyansen för bakgrunden -
funktionen
invert,
som inverterar bakgrundens färger -
funktionen
opacity,
som sätter transparensen för bakgrunden -
funktionen
sepia,
som omvandlar bakgrunden till sepia -
egenskapen
background,
som är en sammanfattande egenskap för bakgrunden -
egenskapen
background-image,
som används för att sätta en bakgrundsbild för ett element