Bagaimana untuk Mencapai Tepi Ditentukan dengan Penapis Kabur CSS3?

Mencapai Tepi Ditentukan dengan Kabur Penapis CSS3

Menggabungkan penapis CSS3 untuk mengaburkan imej meningkatkan kesan visual. Walau bagaimanapun, penapis kabur lalai melangkaui sempadan imej, mengakibatkan tepi kabur. Untuk mengekalkan tepi yang ditakrifkan semasa mengaburkan imej, terokai penyelesaian berikut:

Penyelesaian:

Melampirkan imej kabur dalam

elemen dengan limpahan: tersembunyi; atribut menghalang penapis daripada tumpah ke atas elemen induk. Selain itu, melaraskan jidar, seperti yang dilihat dalam kod tunjuk cara di bawah, memastikan bahagian tepi tetap tajam.

Demo:

[Imej output yang diingini dengan tepi yang ditentukan dan latar belakang kabur]

CSS:

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

HTML:

<div><img src="http://placekitten.com/300" /></div>

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Tepi Ditentukan dengan Penapis Kabur CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css css3 html while Filter Attribute default overflow background

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