Bagaimanakah Saya Boleh Mencipta Bayang-bayang Jatuh yang Sesuai Bentuk untuk Imej PNG dalam CSS?

Lepaskan Bayang-bayang untuk Imej PNG dalam CSS

Mencipta bayang-bayang jatuh untuk imej PNG dalam CSS boleh mencabar, terutamanya bagi mereka yang mempunyai bukan segi empat sama bentuk. Pendekatan biasa menggunakan bayang-bayang kotak selalunya menghasilkan bayang-bayang segi empat sama yang tidak sesuai dengan bentuk imej.

Penyelesaian: Menggunakan penapis: dropShadow()

The penapis: harta dropShadow() menyediakan penyelesaian kepada masalah ini. Ia membolehkan anda menggunakan bayang jatuh dengan kawalan tepat ke atas offset x dan y, jejari kabur dan warna. Penapis ini boleh digunakan terus dalam CSS atau digunakan sebaris.

Contoh CSS:

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

Contoh Sebaris:

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

Dengan menggunakan penapis: dropShadow(), anda boleh mencapai bayang-bayang jatuh yang realistik dan menepati bentuk untuk PNG bukan segi empat sama imej, meningkatkan daya tarikan visual reka bentuk web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Bayang-bayang Jatuh yang Sesuai Bentuk untuk Imej PNG dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!