CSS box-shadow在Firefox和Chromium上呈现不同

Question

我正在考虑依赖box-shadow，但即使在Firefox和Chrome / Chromium上也会有所不同。差异非常微妙，价值较低，但较大的差异非常明显。

在this example中，您可以看到使用负值使阴影变小时会出现差异。左渲染是Chromium 25，右边是Firefox 21。

HTML：

<div>
  Hello there!
</div>

CSS：

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

如何解决此问题？或者我现在应该放弃box-shadow？

Answer 1

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

Answer 2

尝试使用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;
}