css - 如何模糊 Div 边缘

Question

使用 CSS，

像下面这样：http: //gyazo.com/ff14a415cf7ac8622eb0cada3e23137f

我希望我们使用 CSS（最好不是 CSS3）来获得边缘和角落以产生这种效果，而不仅仅是尖锐的边缘。

Answer 1

您可以通过使用box-shadow与 div 的背景颜色相同的颜色来实现此效果，如下所示：

.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/