Bagaimanakah Saya Boleh Mencipta Drop Shadows untuk Imej PNG Berbentuk Tidak Sekata dalam CSS?

Mencipta Drop Shadows untuk Imej PNG Bukan Segi Empat dalam CSS

Memohon bayang titisan pada imej PNG dengan bentuk yang tidak sekata boleh menjadi cabaran menggunakan sifat bayang kotak tradisional. Untuk mencapai bayang jatuh yang betul yang mematuhi bentuk imej, penapis: sifat dropShadow() boleh digunakan.

Penyelesaian CSS:

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

Penyelesaian Sebaris:

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="Bagaimanakah Saya Boleh Mencipta Drop Shadows untuk Imej PNG Berbentuk Tidak Sekata dalam CSS?" >

Harta dropShadow() mengambil masa beberapa parameter:

• x dan y: Jarak bayang-bayang daripada imej dalam piksel
• kabur (pilihan): Kekaburan bayang-bayang dalam piksel
• warna: Warna shadow

Dengan menetapkan sifat penapis kepada drop-shadow(), penyemak imbas akan menghasilkan bayang di sekeliling imej yang mengikut bentuknya, memberikan kesan yang diingini.

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