Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencapai Kesan Kabur Ditakrifkan dalam CSS3 Semasa Memelihara Tepi Tajam?

Bagaimanakah Saya Boleh Mencapai Kesan Kabur Ditakrifkan dalam CSS3 Semasa Memelihara Tepi Tajam?

Barbara Streisandasal: 2024-11-16 14:10:03370semak imbas

How Can I Achieve a Defined Blur Effect in CSS3 While Preserving Sharp Edges?

Mencapai Tepi Ditentukan dengan Kabur Penapis CSS3

Apabila menggunakan kesan kabur pada imej menggunakan sifat penapis CSS, isu biasa timbul: tepi imej juga menjadi kabur. Ini boleh mengakibatkan hasil yang tidak diingini, terutamanya apabila garisan atau butiran tajam perlu dikekalkan.

Untuk menyelesaikan masalah ini dan mengekalkan kelebihan yang jelas, teknik bijak boleh digunakan. Dengan meletakkan imej kabur dalam

elemen dan menggunakan gaya CSS tertentu, adalah mungkin untuk mencipta kesan "inset blur".

Coretan kod berikut menunjukkan cara untuk mencapai kesan ini:

img {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}

Dalam kod ini, < ;img> elemen terkandung dalam

dengan limpahan ditetapkan kepada tersembunyi. Ini memastikan bahawa imej kabur dipangkas di tepi

, menghapuskan limpahan kesan kabur ke persekitaran.

Selain itu, jidar negatif digunakan pada elemen untuk mengalihkannya sedikit dalam

. Nilai jidar ini boleh dilaraskan untuk menghasilkan jumlah kabur yang diingini sambil mengekalkan bahagian tepinya.

Teknik ini dengan berkesan mencipta kesan kabur yang jelas, memastikan tepi imej tajam sambil melembutkan butiran di dalamnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Kesan Kabur Ditakrifkan dalam CSS3 Semasa Memelihara Tepi Tajam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css css3 while Filter using Property this overflow issue

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

Artikel sebelumnya：Bagaimanakah Saya Boleh Menyesuaikan Kotak Input Warna dalam Pelayar Webkit?Artikel seterusnya：Bagaimanakah Saya Boleh Menyesuaikan Kotak Input Warna dalam Pelayar Webkit?

Artikel berkaitan

Lihat lagi