如何使用css模糊图像但保持边框平直？

Question

我试图使用CSS模糊图像.我很"模糊",但我发现这也模糊了边界.有没有办法保持边框平直但模糊图像的其余部分？

http://www.inserthtml.com/2012/06/css-filters/

CSS

filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Answer 1

尝试这样的事情:

HTML:

<div id="container">
   <img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Benz-velo.jpg/220px-Benz-velo.jpg">
</div>?

CSS:

#image{
   filter: blur(5px);
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);

   margin:-1px;
   padding:1px;
}

#container{
   width:222px;
   height:179px;
   overflow:hidden;
}

由于某些原因(至少在Chrome中),图像上的边距似乎是必需的.

同样在jsfiddle:http://jsfiddle.net/jdwire/HUaBV/1/.