css – 如何模糊Div边缘

前端之家收集整理的这篇文章主要介绍了css – 如何模糊Div边缘前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用CSS,

如下:
http://gyazo.com/ff14a415cf7ac8622eb0cada3e23137f

我想要CSS(最好不是CSS3)让边缘和角落产生这种效果,而不仅仅是尖锐的egdes.

解决方法

您可以通过使用与div背景颜色相同的Box-shadow来实现此效果,如下所示:
.blur-Box {
    background-color: #555;
    Box-shadow: 0 0 5px 10px #555;
}

你可以调整第二个和第三个参数(这里是5px和10px)来调整阴影的相对大小和模糊半径(以便分别),以便按照你想要的方式获得它,现代浏览器很好地支持这个功能(参见: http://caniuse.com/#feat=css-boxshadow).

这是一个jsFiddle演示:http://jsfiddle.net/bXAFt/

猜你在找的CSS相关文章