Bagaimana Saya Boleh Mencipta Drop Shadow untuk Imej PNG Tidak Teratur dalam CSS?

Memohon Drop Shadow pada Imej PNG Tidak Sekata dalam CSS

Mencipta kesan bayang jatuh untuk imej PNG dengan bentuk yang tidak sekata boleh memberikan cabaran menggunakan sifat kotak-bayang CSS standard. Ini kerana bayang-bayang kotak menambah bayang-bayang berbentuk segi empat sama di sekeliling imej, yang tidak mematuhi bentuk objek dalam imej.

Penyelesaian: Menggunakan Penapis CSS Hartanah

Untuk menambah bayang jatuh pada imej PNG berbentuk tidak sekata, kita boleh menggunakan sifat penapis CSS dengan fungsi dropShadow(). Fungsi ini mengambil empat parameter: x-offset, y-offset, blur-radius dan warna.

Contoh Code

Berikut ialah contoh cara menggunakan titisan bayang menggunakan fungsi dropShadow():

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

Dalam contoh ini, kami menggunakan bayang-bayang titisan dengan offset 5px dalam kedua-dua arah x dan y, jejari kabur 5px dan warna hitam (#222).

Penggayaan Sebaris

Anda juga boleh menggunakan jatuhkan bayangan sebaris, menggunakan atribut gaya:

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png"
style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

Menggunakan fungsi dropShadow() membolehkan anda cipta bayang jatuh yang mengikut bentuk imej PNG dengan tepat, memberikan kesan yang lebih menarik dan realistik secara visual.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mencipta Drop Shadow untuk Imej PNG Tidak Teratur dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!