⌘K

Funktionen drop-shadow

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

Syntaks

cssselektor {
  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: 

html<div id="elem"></div>
css#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
BackFunktionskontrastNextFunktionen hue-rotate