Bagaimanakah Saya Boleh Mencapai Kesan Kabur Ditakrifkan dalam CSS3 Semasa Memelihara Tepi Tajam?-tutorial css-php.cn

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;
}

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Menyesuaikan Kotak Input Warna dalam Pelayar Webkit? Artikel seterusnya：Bagaimanakah Parameter Pemautan Fail Menghalang Caching?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2205

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2354

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1972

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...