How to Achieve Defined Edges with CSS3 Blur Filter?-CSS Tutorial-php.cn

How to Achieve Defined Edges with CSS3 Blur Filter?

Barbara Streisand

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

Original

411 people have browsed it

How to Achieve Defined Edges with CSS3 Blur Filter?

Achieving Defined Edges with CSS3 Filter Blur

Incorporating CSS3 filters to blur images enhances visual effects. However, the default blur filter extends beyond the image boundaries, resulting in blurred edges. To maintain defined edges while blurring the image, explore the following solution:

Solution:

Enclosing the blurred image within a

element with overflow: hidden; attribute prevents the filter from spilling over the parent element. Additionally, adjusting the margins, as seen in the demo code below, keeps the edges sharp.

Demo:

[Image of desired output with defined edges and blurred background]

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

Copy after login

HTML:

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

Copy after login

The above is the detailed content of How to Achieve Defined Edges with CSS3 Blur Filter?. For more information, please follow other related articles on the PHP Chinese website!