Rumah >hujung hadapan web >tutorial css >Bagaimana Saya Boleh Mencipta Drop Shadow untuk Imej PNG Tidak Teratur dalam CSS?

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

Susan Sarandon
Susan Sarandonasal
2024-12-14 14:44:15228semak imbas

How Can I Create a Drop Shadow for Irregular PNG Images in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn