Firefox 和 Chrome 似乎渲染 box-shadow 的方式完全不同答案

【问题标题】：Firefox and Chrome seem to render box-shadow quite differentlyFirefox 和 Chrome 似乎渲染 box-shadow 的方式完全不同
【发布时间】：2012-10-11 14:45:33
【问题描述】：

我在 Chrome 和 Firefox 中测试了一个盒子阴影效果，我惊讶地发现这两种浏览器在渲染上的巨大差异。值得注意的是，Firefox 的渲染要暗得多。以下是两张参考图片：

第一个图像在 Chrome 22 中渲染，后者在 Firefox 16 中渲染，两者都在 Mac OS 10.8.2 下运行。我不知道为什么这两个图像的渲染如此不同。这是盒子阴影本身，两种浏览器都一样：

box-shadow: 0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5);

如需现场演示，您可以查看here。将鼠标悬停在框上即可获得效果。

有什么方法可以解决渲染中的这种巨大差异吗？

【问题讨论】：

这个问题已经有一段时间了。我还是不知道是什么原因造成的：stackoverflow.com/questions/11167516/…
我的猜测是，这是浏览器公司设计的组件。例如，警报弹出窗口在不同的浏览器中看起来非常不同。如果你想拥有相同的外观，我认为你必须自己绘制和编码。

标签： html css cross-browser

【解决方案1】：

您可以为 Firefox 创建一个媒体选择器，它将使用不同的样式。你将不得不玩弄它。例如，我减少了模糊、散布并提高了最后一个插入框阴影的不透明度。所以 .box:hover 的 CSS 应该看起来像这样：

.box:hover {
  box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5));
}

@-moz-document url-prefix() {
.box:hover {
  box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 130px -120px rgba(0,0,0,0.9));
}
}

有关更多媒体选择器和其他浏览器技巧，您可以访问BrowserHacks.com

【讨论】：

我想使用每个浏览器的前缀就足够了，所以没有理由为此使用 hack。
@xpy 你能举个例子，因为我听不懂你吗？
我做了一个例子：jsfiddle.net/pavloschris/hkJkG 即使有无前缀版本的属性，chrome 使用有前缀的，其他浏览器会使用无前缀的。
正确。但是，如果您在供应商前缀属性后写 box-shadow，较新的版本会使用 box-shadow，而不是 -webkit-box-shadow。

【解决方案2】：

这是 Chrome 中长期存在的错误，已针对 Chrome 73（将于 2019 年 3 月推出）修复。

https://www.chromestatus.com/feature/6569666117894144

从历史上看，Blink 的模糊半径解释与 CSS 和 Canvas2D 规范不一致：Blink 阴影覆盖了大约一半的预期区域（请参阅链接的错误）。随着这一变化，高斯模糊 sigma 现在按照规范要求计算为 1/2 模糊半径。 Blink 的影子实现现在可以匹配 FireFox 和 Safari。

注意：这个错误比从 WebKit 分叉 Blink 更早。 Safari 曾经拥有不同的图形引擎。

https://bugs.chromium.org/p/chromium/issues/detail?id=179006

因此，通过这种变化保持外观的确切公式是
R' = 2 * (0.288675 * R + 0.5)

R' (new)     R (previously)
Chrome 73+   Chrome 72 and below
1.5px        1px
2px          2px
3px          3px
3px          4px
4px          5px
4.5px        6px

R' ≈ 0.7 * R       for R = 7px ... 12px
R' ≈ 0.6 * R       for R = 22px ... ∞

【讨论】：

正如上面的评论指出你的答案基本上只有两个链接。您是否介意引用与更改最相关的部分，以便未来的访问者可以更快地看到重要信息？
在提供的链接中添加了一些引号。

【解决方案3】：

这是因为 Chrome 和 Firefox 使用不同的 html 渲染器。我认为这种剧烈的差异是由拉加颜色引起的，请尝试淡化阴影。

【讨论】：

【解决方案4】：

可能重置 css 会有所帮助：

http://codepen.io/anon/pen/IteyC

【讨论】：

请尝试阅读此stackoverflow.com/help/deleted-answers，以进一步了解如何不回答。即：“没有从根本上回答问题的答案”：仅仅是指向外部网站的链接

【解决方案5】：

您正在使用多个框阴影，因此请尝试这样做（也从框阴影中删除 alpha，我在下面为您完成了此操作）

box-shadow: 0px 1px 3px rgba(0,0,0), 
            inset 0px 4px 2px -2px rgba(255,255,255), 
            inset 0px -3px 1px -2px rgba(0,0,0), 
            inset 0px -20px 200px -100px rgba(0,0,0);

-moz-box-shadow: 0px 1px 3px rgba(0,0,0), 
                 inset 0px 4px 2px -2px rgba(255,255,255), 
                 inset 0px -3px 1px -2px rgba(0,0,0), 
                 inset 0px -20px 200px -100px rgba(0,0,0);

-ms-box-shadow: 0px 1px 3px rgba(0,0,0), 
                inset 0px 4px 2px -2px rgba(255,255,255), 
                inset 0px -3px 1px -2px rgba(0,0,0), 
                inset 0px -20px 200px -100px rgba(0,0,0);

-webki-box-shadow: 0px 1px 3px rgba(0,0,0), 
                   inset 0px 4px 2px -2px rgba(255,255,255), 
                   inset 0px -3px 1px -2px rgba(0,0,0), 
                   inset 0px -20px 200px -100px rgba(0,0,0);

如果还有问题，你有任何小提琴或链接，以便我可以正确检查

【讨论】：

不要为 box-shadow 使用前缀。自 2011 年以来，它已在任何浏览器中实现无前缀，并且 Chrome 的错误渲染差异已在 Chrome 73 中得到修复。