如何使用css过滤器生成图像：模糊和锐利边缘？

我想在悬停时模糊图像

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

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

有没有办法让这种效果有锋利的边缘

html:

---

我所知道的技术，在以下网站上有很好的解释：

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

2.使用“剪辑”属性修剪图像的边缘。剪辑始终按以下顺序进行说明：

clip:rect（顶部，右侧剪辑从左侧的偏移，底部从顶部的偏移，左侧）

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

clip:rect（2px，365px，457px，2px）

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

3.将图像包裹在略小于图像的包含元素（例如a）中，对外部元素应用溢出：隐藏，并将图像稍微向左和向上移动，以消除这些边缘上的可见模糊

--

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

.item img{
    transition:all .5s ;
    border:1px solid #000;
}
将此添加到css中

.item img{margin:0px 0px 0px -1px;} 

在花了一天的时间在这上面之后，我创造了一个蹩脚、丑陋、骇人的解决方案。
可能不会在实际项目中使用它，也许它可以激励其他人在我的解决方案中使用某些东西，但会让它不那么难看。
至少最终结果看起来是我想要的

使用白色边框和框大小：边框框，然后一些边距我能够得到的最终结果有尖锐的边缘，和3/4的边缘不显示绿色背景在过渡期间。如果有人能找出为什么某些边在过渡期间会随背景褪色，这可能会有所帮助


html:

还是希望有更好的
 一点SVG：

<svg width="200" height="200" viewBox="10 10 280 280">
<filter id="blur">
 <feGaussianBlur stdDeviation="10"/>
</filter>
<image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300"/>
</svg>

应该会产生预期的效果。


#小猫：悬停{
过滤器：url（#模糊）；
}
设置剪辑似乎或多或少解决了这个问题。然而，在过渡结束时有一种奇怪的效果。强制使用GPU（通过translateZ破解）似乎可以解决这个问题

CSS

引人入胜的问题-Webkit methinks中的bug。相同的问题供参考。使用
-Webkit transform:scale（1.0）
进行缩放似乎应该比1.2更有效。。。但是，尽管它确实保持了边缘的清晰，但对于过渡期间在图像周围形成的令人不快的绿色效果却无能为力。谢谢！不幸的是，模糊边缘会在过渡过程中出现，即使它们最终因剪辑或小于图像的容器等而消失。添加边框确实会删除模糊边缘。+1用于添加边框。注意：边框可以设置为透明，但仍然可以正常工作。
.item img{margin:0px 0px 0px -1px;} 

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

.box{
box-sizing: border-box;
position:relative;
border:3px solid white;
overflow: hidden;
background:green;
width:300px;
height:300px;
}

div img {
transition:.2s all;
position:absolute;
left: -3px;
top:-3px;
}

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

.tophack{ 
background:white;
width:300px;
height:3px;
z-index:10;
position:absolute;
top: 0px;
}

<svg width="200" height="200" viewBox="10 10 280 280">
<filter id="blur">
 <feGaussianBlur stdDeviation="10"/>
</filter>
<image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300"/>
</svg>

 #kitten:hover { filter:url(#blur); }  

div {
    width:300px;
    height:300px;
    position: absolute;
}
.no {
    left: 400px;
    top: 10px;
}

.box img {
   transition: 2s -webkit-filter;
   position:absolute;
   left: -3px;
   top:-3px;
    clip: rect(5px 295px 295px 5px);
    -webkit-transform: translateZ(0px);
}
div img {
   transition: 2s -webkit-filter;
   position:absolute;
   left: -3px;
   top:-3px;
    clip: rect(5px 295px 295px 5px);
}

div img:hover{
    -webkit-filter: blur(8px);
}