Bagaimana untuk Mencipta Semula Kesan Tindanan Kabur iOS 7 dengan CSS?

Mencipta Semula Kesan Tindanan Kabur iOS 7 dengan CSS

iOS 7 memperkenalkan kesan tindanan kabur yang berbeza yang menambahkan kedalaman dan minat visual pada elemen tertentu. Kesan ini dicapai dengan menggabungkan ketelusan dengan penapis kabur. Walaupun pada mulanya eksklusif untuk platform Apple, ia kini boleh direplikasi menggunakan CSS dan, secara pilihan, JavaScript.

Kesan: Lebih Daripada Ketelusan

Kesan kabur iOS melangkaui ketelusan mudah, kerana ia mewujudkan kabur halus yang melembutkan kandungan asas. Kesan ini amat ketara dalam tindanan volum dan kecerahan yang dipersembahkan dalam Pusat Kawalan iOS.

Penyelesaian CSS

Nasib baik, CSS moden menyokong sifat penapis, yang termasuk blur() berfungsi untuk mencapai kesan yang diingini. Kod berikut menunjukkan cara mencipta kesan kabur menggunakan CSS:

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

Kod ini menggunakan penapis kabur 20 piksel pada elemen yang ditentukan dan mengurangkan kelegapannya kepada 40%. Penapis kabur adalah khusus penyemak imbas, jadi berbilang awalan vendor digunakan untuk memastikan keserasian merentas penyemak imbas.

Contoh Langsung

Untuk melihat kesan dalam tindakan, lihat demo JSFiddle ini: [JSFiddle Demo](https://jsfiddle.net/e5m5efrw/embedded/)

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Semula Kesan Tindanan Kabur iOS 7 dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!