Bagaimana Saya Boleh Mencipta Bayang Jatuh CSS untuk Imej PNG Bukan Persegi?

Kesan Drop Shadow CSS untuk Imej PNG Bukan Persegi

Mencipta kesan bayang jatuh untuk imej PNG bukan segi empat menggunakan CSS boleh menjadi rumit . Pendekatan standard menggunakan sifat bayang kotak menghasilkan bayang segi empat sama yang tidak mengikut kontur imej.

Nasib baik, terdapat penyelesaian menggunakan sifat penapis:

Menggunakan penapis: dropShadow()

Penapis: sifat dropShadow() membolehkan anda mencipta kesan bayang-bayang kabur dengan ofset tersuai dan warna:

filter: drop-shadow(x y blur color);

di mana:

• x dan y mewakili offset mendatar dan menegak bayang
• kabur menentukan jejari kabur bagi bayang
• warna ialah bayang warna

Contoh CSS:

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

Contoh Sebaris:

<img src="image.png">

Teknik ini membolehkan anda untuk mencipta kesan bayang-bayang jatuh yang mengikut bentuk imej PNG bukan segi empat tepat dengan tepat, memberikannya kedalaman yang realistik dan dimensi.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mencipta Bayang Jatuh CSS untuk Imej PNG Bukan Persegi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!