Google chrome CSS框阴影在Firefox和Chromium上呈现不同

我正考虑使用

框阴影

，但即使在Firefox和Chrome/Chrome上，效果也不一样。值较低时差异非常细微，但值较大时差异非常明显

在中，可以看到使用负值使阴影变小时产生的差异。左侧渲染为Chromium 25，右侧渲染为Firefox 21

HTML:

---

我如何解决这个问题？或者我现在应该删除

box shadow

？

尝试使用firefox的

-moz box shadow

属性，它会渲染得更好

div{
  margin:100px;
  padding:100px;
  border:1px solid red;
  -moz-box-shadow: 0 80px 15px -85px #000;
  box-shadow:0 80px 15px -85px #000;
}

---

浏览器使用不同的算法来生成阴影模糊，在Chrome中，阴影像素的不透明度从阴影区域的内边缘到外边缘下降得更快，并且由于在本例中阴影的内1/3隐藏在框下，因此看起来具有不同的开始颜色。如果我们通过将模糊半径和负扩散距离减小5px，使模糊完全可见，并用半透明rgba（）替换实心阴影颜色，则渲染效果的差异将变得不那么显著（）。

-moz box shadow

在Firefox 21中似乎完全被忽略：（将-moz-box-shadow置于正常的box-shadow之上。然后它应该可以工作。请参阅我的编辑。它可以工作，但与删除

-moz-box-shadow

相同。也就是说，

-moz-box-shadow

似乎对我没有任何作用。好的。下面的答案很有意义：）看那个。谢谢，这看起来很有希望！因为我必须调整几个阴影，所以应该需要一段时间来检查这个。Chrome有问题（）。很快就会解决：-）Chrome 73（2019年3月）中可能存在的重复

div{
  margin:100px;
  padding:100px;
  border:1px solid red;
  box-shadow:0 80px 15px -85px #000;
}

div{
  margin:100px;
  padding:100px;
  border:1px solid red;
  -moz-box-shadow: 0 80px 15px -85px #000;
  box-shadow:0 80px 15px -85px #000;
}