google-chrome - 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)。