Funkcija drop-shadow

Funkcija drop-shadow leidžia pridėti šešėlį prie fono paveikslėlio.

Sintaksė

cssselektorius {
  filter: drop-shadow(poslinkis x ašyje, poslinkis y ašyje, blankimo spindulys, spalva);
}

Reikšmės

Reikšmė	Aprašas
poslinkis x ašyje	Šešėlio poslinkis horizontaliai fono atžvilgiu. Teigiamas skaičius reiškia šešėlio poslinkį į dešinę, neigiamas - į kairę. Privalomas parametras.
poslinkis y ašyje	Šešėlio poslinkis vertikaliai fono atžvilgiu. Teigiamas skaičius reiškia šešėlio poslinkį žemyn, neigiamas - aukštyn. Privalomas parametras.
blankimas	Nustato šešėlio blankimo spindulį. Kuo didesnė reikšmė, tuo labiau šešėlis išsiblanko. Pasirinktinis parametras. Pagal nutylėjimą yra `0`.
spalva	Šešėlio spalva. Pasirinktinis parametras. Pagal nutylėjimą nustatoma juoda šešėlio spalva.

Pavyzdys

Nustatykime mūsų paveikslėliui žydrą šešėlį be poslinkio išilgai ašių, su 5px blankimu:

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;
}

Результат:

Taip pat žiūrėkite

funkcija blur,
kuri blankina foną
funkcija brightness,
kuri nustato fono ryškumą
funkcija contrast,
kuri nustato fono kontrastą
funkcija hue-rotate,
kuri nustato fono atspalvį
funkcija invert,
kuri invertuoja fono spalvas
funkcija opacity,
kuri nustato fono permatomumą
funkcija sepia,
kuri paverčia foną sepija
savybė background,
kuri yra trumpinys fonui nustatyti
savybė background-image,
kuria blokui galima nustatyti fono paveikslėlį