Chrome和Firefox中相同的框阴影大小的不同输出

Question

为什么Chrome和Firefox中的box-shadow大小不同？

box-shadow: 0 0 4px #aaa inset;

铬：

火狐：

我已经尝试过以下操作，但它不适用于最新的Firefox。

-moz-box-shadow: 0 0 2px #aaa inset;
-webkit-box-shadow: 0 0 4px #aaa inset;

如何以相同的尺寸设置跨浏览器框阴影？

Answer 1

w3schools says there are 6 values to box shadow：

box-shadow: h-shadow v-shadow blur spread color inset;

模糊和传播是可选的，我的猜测是，因为你只在颜色之前定义了三个值，所以两个浏览器的解释方式不同。

我让他们看起来一样（至少我的眼睛）以下js小提琴：

-moz-box-shadow: 0px 0px 3px 0px #aaa inset;
-webkit-box-shadow: 0px 0px 5px 0px #aaa inset;

希望这有帮助

Answer 2

我遇到了同样的问题 试着认为所有浏览器都有更大的影子，只有webkit更小 所以解决方案是：

box-shadow: 0 0 2px #aaa inset; /* for all browsers */
-moz-box-shadow: 0 0 2px #aaa inset; /* for old firefox */
-webkit-box-shadow: 0 0 4px #aaa inset; /* override for Chrome & Safari */

希望Chrome和Safari将继续支持-webkit-box-shadow。

Answer 3

阴影有所不同，因为Chrome自多年以来一直是越野车： https://bugs.chromium.org/p/chromium/issues/detail?id=179006

预计这将在Chrome 73中修复（2019年3月）： https://www.chromestatus.com/feature/6569666117894144

对于跨浏览器阴影，最简单的操作就是使用Firefox或Safari创建它。 Chrome 73及更高版本将正确显示。

请不要对箱形阴影使用前缀黑客。自2011年以来，Box-shadow在所有浏览器中都没有前缀。