Funksjonen drop-shadow
Funksjonen drop-shadow lar deg
legge til skygge til bakgrunnsbildet.
Syntaks
velger {
filter: drop-shadow(forskyvning x, forskyvning y, utflytingsradius, farge);
}
Verdier
| Verdi | Beskrivelse |
|---|---|
| forskyvning x | Forskyvning av skyggen horisontalt i forhold til bakgrunnen. Et positivt tall betyr forskyvning av skyggen til høyre, negativt - til venstre. Obligatorisk parameter. |
| forskyvning y | Forskyvning av skyggen vertikalt i forhold til bakgrunnen. Et positivt tall betyr forskyvning av skyggen nedover, negativt - oppover. Obligatorisk parameter. |
| utflyting |
Setter utflytingsradiusen for skyggen.
Jo høyere verdi, jo mer utflytes skyggen.
Valgfri parameter. Standard
er 0.
|
| farge | Skyggens farge. Valgfri parameter. Standard sett til svart farge på skyggen. |
Eksempel
La oss sette en blå skygge for bildet vårt
uten forskyvning langs aksene, med utflyting 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 også
-
funksjonen
blur,
som utflyter bakgrunnen -
funksjonen
brightness,
som setter lysstyrke på bakgrunnen -
funksjonen
contrast,
som setter kontrast på bakgrunnen -
funksjonen
hue-rotate,
som setter fargetone på bakgrunnen -
funksjonen
invert,
som inverterer bakgrunnens farger -
funksjonen
opacity,
som setter gjennomsiktighet på bakgrunnen -
funksjonen
sepia,
som konverterer bakgrunnen til sepia -
egenskapen
background,
som er en sammentrekkende egenskap for bakgrunn -
egenskapen
background-image,
som kan brukes til å sette bakgrunnsbilde til en blokk