css - 如何模糊 Div 边缘

标签 css html

使用 CSS,

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

我想使用 CSS(最好不是 CSS3)来让边缘和 Angular 落产生这种效果,而不仅仅是尖锐的边缘。

最佳答案

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

.blur-box {
    background-color: #555;
    box-shadow: 0 0 5px 10px #555;
}

您可以调整第二个和第三个参数(此处为 5px10px)以调整阴影的相对大小和模糊半径(分别)以获得它您想要的方式,现代浏览器很好地支持此功能(请参阅:http://caniuse.com/#feat=css-boxshadow)。

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

关于css - 如何模糊 Div 边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15775365/

相关文章:

javascript - 如何设置下拉列表中显示的默认值?

javascript - 如何实现动态幻灯片创建-javascript?

javascript - 代码适用于 Codepen,但不适用于 JSFiddle 或 HTML 页面

javascript - 停止 Div 滚动到另一个 div

html - 细胞景观。从 URL 加载依赖

html - 减少页面大小

html - 需要边框与 td 对齐

javascript - 如何使用分区来划分网页以及如何在页面的这些部分之间提供链接

jquery - 如何删除第一个标签之前未包含的脏文本

html - 将输入提交与输入框放在同一行