Bagaimana untuk Mencapai Tepi Ditentukan dengan Penapis Kabur CSS3?-tutorial css-php.cn

Bagaimana untuk Mencapai Tepi Ditentukan dengan Penapis Kabur CSS3?

Barbara Streisand

Lepaskan： 2024-11-16 16:46:03

asal

303 orang telah melayarinya

How to Achieve Defined Edges with CSS3 Blur Filter?

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

Salin selepas log masuk

HTML:

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

Salin selepas log masuk

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!