如何使用 css 滤镜获得图像：模糊和锐利边缘？

我想在悬停时模糊图像。

问题是图像的边缘也模糊得令人不快。 在 Fiddle 中，您可以在绿色背景下清楚地看到它。

如果我缩放图像，即 1.2，它最终会解决问题，但在过渡过程中，模糊的边缘仍然出现。

有什么想法如何使边缘具有这种效果？

http://jsfiddle.net/d8Njs/ http://jsfiddle.net/d8Njs/

html:

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

css:

.item {
overflow: hidden;
width:300px;
height: 300px;
background: green;
}

.item img{
transition:all .5s ;
}

.item img:hover{
-webkit-filter: blur(5px);
/*skaling the image would help, but it still looks bad during the transition
-webkit-transform:scale(1.2); */
}

我所知道的技术，在以下位置有很好的解释http://demosthenes.info/blog/534/Crossbrowser-Image-Blur http://demosthenes.info/blog/534/Crossbrowser-Image-Blur:

1..如果您的图像的所有外边缘都具有相同的颜色，如上例所示，您可以将主体或容器元素的背景颜色设置为相同的颜色。（仅供参考；并不真正适用于您，至少不适用于您的小提琴）。

2..使用clip属性修剪图像的边缘。剪辑始终按以下顺序表示：

clip: rect( top, offset of right clip from left side, offset of bottom from top, left)

对于上面的示例，图像为 367 像素宽 × 459 像素高，模糊 2 像素，因此剪辑将表示为：

clip: rect(2px,365px,457px,2px);

（请注意，clip 仅适用于应用了position:absolute 的元素。如果您想获得IE8 及更早版本的支持，请记住将px 放在值的末尾）。（不知道您是否将照片放置在堆栈、网格或只是标注等中。如果您可以接受绝对定位，则可能是合适的。）

3..将图像包裹在比图像稍小的包含元素（例如 a ）中，将overflow:hidden应用到外部元素并将图像稍微向左和向上移动以消除这些边缘上的可见模糊。

--

另外，在图像周围添加边框似乎至少在 Webkit 中有所帮助，但我还没有对其进行广泛的测试。

.item img{
    transition:all .5s ;
    border:1px solid #000;
}