Fungsi drop-shadow

Fungsi drop-shadow memungkinkan Anda menambahkan bayangan ke gambar latar belakang.

Sintaksis

selektor {
	filter: drop-shadow(geser x, geser y, radius blur, warna);
}

Nilai

Nilai	Deskripsi
geser x	Menggeser bayangan secara horizontal relatif terhadap latar belakang. Angka positif menunjukkan bayangan bergeser ke kanan, angka negatif - ke kiri. Parameter wajib.
geser y	Menggeser bayangan secara vertikal relatif terhadap latar belakang. Angka positif menunjukkan bayangan bergeser ke bawah, angka negatif - ke atas. Parameter wajib.
blur	Mengatur radius blur bayangan. Semakin besar nilainya, semakin buram bayangannya. Parameter opsional. Secara default sama dengan `0`.
warna	Warna bayangan. Parameter opsional. Secara default warna bayangan diatur menjadi hitam.

Contoh

Mari kita atur bayangan biru untuk gambar kita tanpa pergeseran pada sumbu, dengan blur 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 mem-blur latar belakang
fungsi brightness,
yang mengatur kecerahan latar belakang
fungsi contrast,
yang mengatur kontras latar belakang
fungsi hue-rotate,
yang mengatur rona warna latar belakang
fungsi invert,
yang membalikkan warna latar belakang
fungsi opacity,
yang mengatur transparansi latar belakang
fungsi sepia,
yang mengubah latar belakang menjadi sepia
properti background,
yang merupakan properti singkatan untuk latar belakang
properti background-image,
yang dapat digunakan untuk mengatur gambar latar belakang pada sebuah blok