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