Bagaimanakah Saya Boleh Mencipta Bayang Jatuh SVG Menggunakan Penapis CSS3?

SVG Drop Shadow Menggunakan CSS3

Mencipta drop shadow untuk elemen SVG menggunakan CSS3 mungkin kelihatan mengelirukan, terutamanya memandangkan kekurangan sokongan langsung untuk tradisional sifat box-shadow dan -webkit-box-shadow. Walau bagaimanapun, terdapat penyelesaian yang berdaya maju menggunakan penapis CSS.

Menggunakan Penapis CSS

Penapis CSS menyediakan cara untuk menggunakan kesan visual pada elemen SVG. Untuk mencipta bayang-bayang jatuh menggunakan kaedah ini, anda boleh menggunakan sifat penapis dengan bayang-bayang jatuh() fungsi.

Sintaks

.element {
  filter: drop-shadow(horizontal-offset vertical-offset blur-radius color);
}

Contoh

.shadow {
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}

Keserasian

Penapis drop-shadow() disokong dalam penyemak imbas moden, termasuk:

• Pelayar webkit
• Firefox 34
• Edge

Polyfill

Untuk penyemak imbas yang tidak menyokong penapis drop-shadow(), anda boleh menggunakan polyfill. Satu polyfill yang popular ialah [CSS Shadow](https://github.com/mdn/css-shadow), yang menyediakan sokongan untuk Firefox < 34 dan IE6 .

Menggunakan Drop Shadow

Anda boleh menggunakan drop shadow pada mana-mana elemen SVG. Hanya tambahkan kelas bayangan pada elemen:

Kesimpulan
Menggunakan penapis CSS, anda boleh mencipta bayang-bayang jatuh untuk elemen SVG dengan usaha pengekodan yang minimum. Teknik ini serasi dengan penyemak imbas moden dan menyokong pemaparan silang penyemak imbas menggunakan polyfill.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Bayang Jatuh SVG Menggunakan Penapis CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!