css - 使用 CSS3 滤镜模糊定义边缘

Question

我用这段代码模糊了一些图像

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

虽然图像的边缘也变得模糊。是否可以模糊图像，同时保持边缘清晰？比如插入模糊之类的？

Answer 1

你可以把它放在 <div> 中与 overflow: hidden;并设置 <img>至 margin: -5px -10px -10px -5px; .

演示:

输出

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>​​​​​​​​​​​​