Bagaimanakah Saya Boleh Mencipta Bayang Jatuh Tepat untuk Imej PNG Berbentuk Tidak Sekata Menggunakan CSS?

Memohon Drop Shadow pada Imej PNG Berbentuk Tidak Sekata Menggunakan CSS

Pendekatan standard untuk menggunakan bayang jatuh pada imej PNG menggunakan -o- box-shadow, -icab-box-shadow, -khtml-box-shadow, -moz-box-shadow, -webkit-box-shadow, atau sifat box-shadow memperlakukan imej sebagai segi empat sama. Ini boleh mengakibatkan bayang-bayang tidak mematuhi bentuk sebenar imej.

Untuk menggunakan bayang-bayang titisan yang mengikut kontur imej PNG bukan segi empat tepat, anda boleh menggunakan penapis CSS: dropShadow() harta benda. Sintaks sifat ini adalah seperti berikut:

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

Di sini, x dan y masing-masing mewakili offset mendatar dan menegak bayang-bayang, manakala kabur mentakrifkan kekaburan tepi bayang-bayang. Parameter warna pilihan menetapkan warna bayang-bayang.

Teknik ini boleh digunakan menggunakan peraturan CSS biasa:

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

Sebagai alternatif, anda boleh menentukan penapis sebaris untuk imej individu:

<img src="image.png">

Dengan menggunakan penapis: sifat dropShadow(), anda boleh mencapai bayang-bayang jatuh yang tepat pada imej PNG berbentuk tidak sekata, meningkatkan daya tarikan visual mereka dan menambah kedalaman pada reka bentuk anda.

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