可以通过添加负边距来防止图像具有未定义的模糊边缘,但是在CSS转换期间,这会失败.在添加或删除过滤器模糊类时,如何保持CSS过渡期间定义的图像边缘？
测试中：
> Firefox 37：效果很棒！
> Chrome 42：图像和边框所在的位置
父元素满足图像闪烁/模糊/未定义
> IE9：没那么多……
看看我的例子：Codepen
HTML：
CSS：
html,body{
margin:0;
text-align:center;
background:#F8F8F8;
height:100%;
}
h2{
margin:1em 0;
padding:0;
line-height:1;
color:#111;
}
p{
margin:1em 0;
padding:0;
line-height:1;
text-align:justify;
color:#999;
}
.montserrat{
font-family: 'Montserrat',sans-serif;
}
.hind{
font-family: 'Hind',sans-serif;
}
hr {
width:100%;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #222;
margin: 1em 0;
padding: 0;
line-height:0;
}
.col{
max-width:400px;
display:inline-block;
height:100%;
float:left;
background:#333;
padding-left:20px;
padding-right:20px;
}
.container{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width:10%;
display:inline-block;
padding-top:10%;
position:absolute;
overflow:hidden !important;
border-radius:50%;
-webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px);/*prevents image from overflowing*/
}
.container img{
position:absolute;
min-width:calc(100% + 30px);
height:calc(100% + 30px);
left:-15px;
right:-15px;
top:-15px;
bottom:-15px;
-webkit-transition: .5s ease-in-out;
}
.blur{
-webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
}
只是一个微笑的jQuery：
$(document).ready(function(){
$('img').hover(function(){
$(this).toggleClass('blur');
});
});
最佳答案
当应用于处于HW加速模式的内容时,图像上的过滤器(以及一些动画和过渡)具有更好的结果.尝试强制浏览器使用该模式,最简单的方法是使用一些3d变换：
.container img{
transform: translateZ(0.1px)
}
见：http://codepen.io/ondrakoupil/pen/GJpaJo
现在很流畅(OS X上的Chrome 39)
