CSS drop-shadow() functie

definitie en gebruik

CSS drop-shadow() De filterfunctie past een projectie-effect toe op de afbeelding.

Voeg verschillende projectie-effecten toe aan de afbeelding:

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

Voeg verschillende projectie-effecten toe aan de afbeelding (gebruik negatieve waarden voor horizontale en verticale schaduwen):

#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)

waarde	beschrijving
h-shadow	verplicht. Specificeer de pixelwaarde van de horizontale schaduw. Negatieve waarden plaatsen de schaduw links van het beeld.
v-shadow	verplicht. Specificeer de pixelwaarde van de verticale schaduw. Negatieve waarden plaatsen de schaduw bovenop het beeld.
blur	optioneel. Voeg een vaagheids effect toe aan de schaduw, gemeten in pixels. Hoe groter de waarde, hoe sterker het verwarmde effect (de schaduw wordt groter en lichter). Negatieve waarden zijn niet toegestaan. Indien geen waarde is opgegeven, is de standaardwaarde 0 (de schaduwrand is scherp).
spread	optioneel. Moet een pixelwaarde zijn. Positieve waarden laten de schaduw uitbreiden en groter worden, terwijl negatieve waarden de schaduw verkleinen. Indien niet opgegeven, is de standaardwaarde 0 (de schaduw is van dezelfde grootte als het element).
color	optioneel. Voeg een kleur toe aan de schaduw. Indien niet opgegeven, hangt de kleur af van de browser (meestal zwart).