Question

我在Chrome和Firefox中测试了一个盒子阴影效果，我惊讶地发现两个浏览器之间的渲染有很大差异。值得注意的是，Firefox的渲染很多更暗。这是两个参考图像：

Chrome 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。将鼠标悬停在方框上即可获得效果。

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

Answer 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

Answer 2

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

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

从历史上看，Blink对模糊半径的解释与CSS和Canvas2D规范不一致：Blink阴影大约覆盖了预期区域的一半（请参阅链接的错误）。根据规范的要求，通过此更改，高斯模糊西格玛现在被计算为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 ... ∞

Answer 3

这是因为Chrome和Firefox使用不同的html渲染器。我认为激烈的差异是由raga颜色引起的，试着淡化阴影。

Answer 4

可能会重置css会有所帮助：

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

Answer 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);

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

Firefox和Chrome似乎完全不同地渲染了box-shadow

5 个答案: