CSS drop-shadow() funktio

Määrittely ja käyttö

CSS: drop-shadow() Suodatusfunktiot soveltavat varjoja kuville.

Lisää kuville erilaisia varjoja:

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

Lisää kuville erilaisia varjoja (käyttämällä negatiivisia arvoja horisontaalisessa ja pystysuuntaisessa varjossa):

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

Arvo	Kuvaus
h-shadow	Välttämätön. Määritä horisontaalinen varjon pikseliarvo. Negatiivinen arvo asettaa varjon kuvan vasemmalle puolelle.
v-shadow	Välttämätön. Määritä pystysuuntainen varjon pikseliarvo. Negatiivinen arvo asettaa varjon kuvan yläpuolelle.
blur	Valinnainen. Lisää hämärtäminen varjoon, yksikkönä pikseli. Arvojen suurempi, sitä voimakkaampi hämärtäminen (varjo kasvaa ja häviää). Ei sallita negatiivisia arvoja. Jos arvoa ei määritetty, oletusarvo on 0 (varjon reunat ovat terävät).
spread	Valinnainen. Arvon on oltava pikseliarvo. Positiivinen arvo laajentaa ja suurennetaan varjoa, negatiivinen arvo pienentää varjoa. Jos ei määritetty, oletusarvo on 0 (varjo on elementin koko).
color	Valinnainen. Lisää varjo väriin. Jos ei määritetty, väri riippuu selaimesta (yleensä musta).