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