Html 如何模糊 Div 边缘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15775365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Blur Div Edges
提问by James Mitchell
Using CSS,
使用 CSS，
like the following: http://gyazo.com/ff14a415cf7ac8622eb0cada3e23137f
如下所示：http: //gyazo.com/ff14a415cf7ac8622eb0cada3e23137f
I want to us CSS (preferably not CSS3) to get the edges and corners to have that effect, instead of just sharp egdes.
我希望我们使用 CSS（最好不是 CSS3）来使边缘和角落具有这种效果，而不仅仅是锐利的边缘。
回答by metadept
You can achieve this effect by using a box-shadowthe same color as the div's background, like this:
您可以通过使用box-shadow与 div 背景相同的颜色来实现此效果，如下所示：
.blur-box {
background-color: #555;
box-shadow: 0 0 5px 10px #555;
}
You can adjust the second and third arguments (5pxand 10pxhere) to tweak the relative size and blur radius (respectively) of the shadow in order to get it the way you want, and this feature is well supported by modern browsers (see: http://caniuse.com/#feat=css-boxshadow).
您可以调整第二个和第三个参数（5px和10px这里）来调整阴影的相对大小和模糊半径（分别），以获得您想要的方式，并且现代浏览器很好地支持此功能（请参阅：http： //caniuse.com/#feat=css-boxshadow）。
Here's a jsFiddle demo: http://jsfiddle.net/bXAFt/
这是一个 jsFiddle 演示：http: //jsfiddle.net/bXAFt/
