CSS drop-shadow() funktion

Definition och användning

CSS drop-shadow() Filterfunktionen applicerar skuggverk på bilderna.

Lägg till olika skuggverk till bilderna:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

Lägg till olika skuggverk till bilderna (använd negativa värden för horisontell och vertikal skugga):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

Värde	Beskrivning
h-shadow	Obligatoriskt. Specificera pixelvärdet för den horisontella skuggan. Negativa värden placerar skuggan till vänster om bilden.
v-shadow	Obligatoriskt. Specificera pixelvärdet för den vertikala skuggan. Negativa värden placerar skuggan ovanpå bilden.
blur	Valfritt. Lägg till en suddig effekt till skuggan, i pixelpunkter. Ju större värdet, desto starkare blir suddig effekten (skuggan blir större och ljusare). Negativa värden är inte tillåtna. Om inte specificerat, är standardvärdet 0 (skuggans kant är klar).
spread	Valfritt. Måste vara i pixelpunkter. Positiva värden gör skuggan större och större, medan negativa värden gör den mindre. Om inte specificerat, är standardvärdet 0 (skuggan är lika stor som elementet).
color	Valfritt. Lägg till färg till skuggan. Om inte specificerat, beror färgen på webbläsaren (vanligtvis svart).