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

HTML:

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

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!

css css3 html while Filter Attribute default overflow background

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn