Bagaimana Saya Boleh Mencipta Drop Shadow SVG Menggunakan CSS3?

SVG Drop Shadow Menggunakan CSS3

Melaksanakan Drop Shadow dengan CSS3

Ada kemungkinan untuk menambah kesan drop shadow pada elemen SVG menggunakan CSS3. Bertentangan dengan sifat box-shadow atau -webkit-box-shadow sebelumnya, pendekatan moden melibatkan penggunaan sifat penapis CSS.

Menggunakan Sifat Penapis CSS

Disokong oleh penyemak imbas popular seperti webkit, Firefox 34 , dan Edge, sifat penapis CSS menyediakan sintaks khusus untuk kesan bayang jatuh:

filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));

Memohon the Drop Shadow Effect

Gunakan sifat penapis pada elemen SVG anda dengan kelas ".shadow":

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

Kesan drop shadow akan digunakan pada mana-mana elemen SVG dengan ". kelas bayangan", termasuk imej, bentuk dan kumpulan. Penampilan bayang-bayang boleh disesuaikan dengan melaraskan nilai dalam fungsi penapis.

Keserasian Merentasi Penyemak Imbas

Walaupun sifat penapis sahaja memberikan sokongan yang sangat baik, anda mungkin memerlukan poliisi untuk penyemak imbas lama seperti FF < 34 atau IE6 . Polyfills boleh meniru gelagat kesan penapis, memastikan keserasian merentas julat penyemak imbas yang lebih luas.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mencipta Drop Shadow SVG Menggunakan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!