Bagaimanakah Saya Boleh Mencipta Semula Kesan Tindanan Kabur iOS 7 dengan CSS?

Kesan Tindanan Kabur iOS 7 Dicipta Semula dengan CSS

Kesan tindanan Apple dalam iOS 7 bukan sekadar soal ketelusan, tetapi melibatkan perkara yang halus kabur yang menambah kedalaman dan minat. Artikel ini meneroka cara untuk meniru kesan ini menggunakan CSS, mendedahkan rahsia di sebalik tindanan kabur.

Penapis Kabur CSS

Kunci untuk mencapai kesan kabur ini terletak pada Penapis CSS blur(), yang tersedia dalam penyemak imbas moden seperti Chrome, Firefox, Safari dan IE10 . Sintaks untuk menggunakan penapis blur() adalah mudah:

<code class="css">filter: blur(value);</code>

dengan nilai mewakili jejari kabur yang dikehendaki dalam piksel. Untuk kabur halus yang serupa dengan tindanan Apple, nilai sekitar 20 piksel disyorkan.

Contoh Pelaksanaan

Untuk menggunakan kesan kabur pada elemen pada halaman anda, cuma tambahkan peraturan CSS berikut:

<code class="css">#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}</code>

Perhatikan bahawa anda mungkin perlu memasukkan awalan vendor untuk keserasian dengan penyemak imbas lama. Selain itu, jangan lupa untuk menentukan nilai kelegapan untuk memastikan tindanan kabur tidak sepenuhnya mengaburkan kandungan asas.

Contoh dalam JavaScript

Jika anda lebih suka gunakan kesan kabur secara dinamik menggunakan JavaScript, anda boleh menggunakan kod berikut:

<code class="javascript">var element = document.getElementById('myDiv');
element.style.filter = 'blur(20px)';
element.style.opacity = 0.4;</code>

Dengan menggunakan penapis blur() dan secara pilihan menggabungkannya dengan JavaScript, anda boleh mencipta semula kesan tindanan kabur yang digunakan dalam iOS 7 dengan mudah. , mempertingkatkan estetika visual aplikasi web anda.

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