Question

有一些关于切断正方形图像边缘的帖子，但是对于一个采用cirlce形状的图像没有。

不幸的是，表达here的解决方案不起作用，因为它会切断圆圈。

这是一个尝试使用上述解决方案的JSFiddle：http://jsfiddle.net/3hg7ry9k/

CSS：

.fix {
     margin: -5px -10px;
}

.avatar {
    width: 128px;
    -webkit-filter: blur(5px);
    border-radius: 50%;
}

基本上，我尝试使用边框清晰的圆圈图像。

Answer 1

你应该将模糊效果设置为img。并将border-radius设置为容器：

http://jsfiddle.net/t1e1s5hb/

<强> HTML

<div class="avatar">
    <img class="fix" src="http://pickaface.net/avatar/Opi51c7dccf270e0.png" width="150">
</div>

<强> CSS

.fix {
    margin: -5px -10px;
    -webkit-filter: blur(5px);
}

.avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
}

Answer 2

在这一点上它并不是很兼容，但它是未来：

img {
    -webkit-filter: blur(5px);
    -webkit-clip-path: circle(50% at center);
}

<img src="http://pickaface.net/avatar/Opi51c7dccf270e0.png"/>

（适用于Chrome 43）

切断圆形模糊图像的令人讨厌的边缘

2 个答案: