Funktionen drop-shadow

Funktionen drop-shadow giver mulighed for at tilføje skygge til baggrunds- billedet.

Syntaks

selektor {
	filter: drop-shadow(forskydning x, forskydning y, sløringsradius, farve);
}

Værdier

Værdi	Beskrivelse
forskydning x	Forskydning af skyggen vandret i forhold til baggrunden. Et positivt tal betyder en forskydning af skyggen til højre, negativt - til venstre. Obligatorisk parameter.
forskydning y	Forskydning af skyggen lodret i forhold til baggrunden. Et positivt tal betyder en forskydning af skyggen nedad, negativt - opad. Obligatorisk parameter.
sløring	Sætter sløringsradius for skyggen. Jo højere værdi, jo mere sløres skyggen. Valgfri parameter. Som standard `0`.
farve	Skyggens farve. Valgfri parameter. Som standard sættes skyggens farve til sort.

Eksempel

Lad os indstille en blå skygge for vores billede uden forskydning langs akserne, med en sløring 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å

funktionen blur,
som slører baggrunden
funktionen brightness,
som indstiller lysstyrken for baggrunden
funktionen contrast,
som indstiller kontrasten for baggrunden
funktionen hue-rotate,
som indstiller farvetonen for baggrunden
funktionen invert,
som inverterer baggrundens farver
funktionen opacity,
som indstiller gennemsigtigheden for baggrunden
funktionen sepia,
som omdanner baggrunden til sepia
egenskaben background,
som er en sammentrækningsegenskab for baggrunden
egenskaben background-image,
som kan bruges til at tildele et baggrundsbillede til en blok