⌘K

Funktionen drop-shadow

Funktionen drop-shadow låter dig lägga till en skugga till en bakgrundsbild.

Syntax

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

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 ä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
BackFunktionen contrastNextFunktionen hue-rotate