Chrome 中的错误：渲染大框阴影答案

【问题标题】：Bug in Chrome: render big box-shadowChrome 中的错误：渲染大框阴影
【发布时间】：2015-06-20 06:29:42
【问题描述】：

我只想将 div 的 box-shadow 设置为：... 0 0 500px ...（大模糊值）。

在谷歌浏览器（最新版本，windows 和 ubuntu）中，我看到了奇怪的方块伪影。在 Firefox 中，我得到的只是一个普通的阴影。

JSFiddle：http://jsfiddle.net/2GRGF/1/（来自How to create a box-shadow that covers the entire page?）

有什么解决办法吗？

【问题讨论】：

看在上帝的份上，不要这样做。您在全屏100ms-160ms 之间有绘画时间。你不需要这样做。
@BlagoEreš 我只需要静态轻量级非常大的发光效果。那么，有什么更好的画法呢？ SVG？
我不知道你的设计是什么样子的，但恐怕目前 CSS box-shadow 是唯一的选择，但性能会下降，我建议你不要这样做。尝试重新思考您的设计，并提出更实用、更高效的设计。 border-radius + box-shadow 仍然是非常昂贵的 CSS 属性，尤其是在 Chrome 中。

标签： css google-chrome

【解决方案1】：

您可以使用过滤器模拟插入框阴影。像这样：http://jsfiddle.net/igoradamenko/vmeortsf/

HTML：

<div class="shadow">
    <div class="blurred"></div>
</div>

CSS：

.shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background: #555;
}

.blurred {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
    width: 60%;
    height: 60%;
    border-radius: 50%;

    background: #fff;
    -webkit-filter: blur(100px);
    filter: blur(100px);
}

所有现代浏览器都支持今天的过滤器，除了 IE（所有浏览器）。但是您可以对它们使用条件规则。所以，它必须至少在 IE9+ 中工作：http://jsfiddle.net/igoradamenko/yywuhx3p/

【讨论】：

在这种情况下，我更喜欢径向渐变...更快。
@LevChurakov 我不确定渲染/绘制速度过滤器和渐变，但是为渐变编写代码确实更快。老实说，我完全忘记了他们。无论如何，我确信 box-shadow 比他们每个人都慢。如果你真的需要 box-shadow，你应该添加 transform: translatez(0); 到 div 中。它会加速阴影并移除一些人工制品。不是全部，但半条面包总比没有面包好。祝你好运！ :)

【解决方案2】：

您的模糊半径太大。

虽然我不认为这是一个好主意，正如@LevChurakov 所暗示的那样......

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0px 0px 215px #000000;
    box-shadow: inset 0px 0px 215px #000000;
}

【讨论】：

当边界半径不是那么大时，我看到了这个错误。附图是这个 jsfiddle 截图。在 Firefox 中，它又平滑又干净。
-moz-box-shadow: inset 0px 0px 215px #000000;你没有 FF 特定的风格。
在 FF 中它运行良好并且运行良好（您现在不需要任何前缀：caniuse.com/#feat=css-boxshadow）。在 Chrome 中 - 不。