Fungsi drop-shadow

Fungsi drop-shadow membolehkan anda menambah bayang-bayang kepada imej latar belakang.

Sintaks

pemilih {
	filter: drop-shadow(anjakan x, anjakan y, jejari kabur, warna);
}

Nilai

Nilai	Penerangan
anjakan x	Anjakan bayang-bayang secara mendatar relatif kepada latar belakang. Nombor positif menandakan anjakan bayang-bayang ke kanan, negatif - ke kiri. Parameter wajib.
anjakan y	Anjakan bayang-bayang secara menegak relatif kepada latar belakang. Nombor positif menandakan anjakan bayang-bayang ke bawah, negatif - ke atas. Parameter wajib.
kabur	Menetapkan jejari kabur bayang-bayang. Semakin besar nilai, semakin kabur bayang-bayang. Parameter pilihan. Secara lalai sama dengan `0`.
warna	Warna bayang-bayang. Parameter pilihan. Secara lalai warna bayang-bayang hitam ditetapkan.

Contoh

Mari kita tetapkan bayang-bayang biru untuk imej kita tanpa anjakan pada paksi, dengan kekaburan 5px:

<div id="elem"></div>

#elem {
	filter: drop-shadow(0 0 5px #035470);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Lihat juga

fungsi blur,
yang mengaburkan latar belakang
fungsi brightness,
yang menetapkan kecerahan latar belakang
fungsi contrast,
yang menetapkan kontras latar belakang
fungsi hue-rotate,
yang menetapkan kewarnaan latar belakang
fungsi invert,
yang menyongsangkan warna latar belakang
fungsi opacity,
yang menetapkan ketelusan latar belakang
fungsi sepia,
yang mengubah latar belakang kepada sepia
sifat background,
yang merupakan sifat singkatan untuk latar belakang
sifat background-image,
yang boleh digunakan untuk menetapkan imej latar belakang kepada blok