1

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

在此示例中，您可以看到使用负值缩小阴影时会出现差异。左渲染是 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;
}

与 Chromium 和 Firefox 的区别，第一个例子

我该如何解决这个问题？或者我box-shadow现在应该去？

4

2 回答 2

2

浏览器使用不同的算法来生成阴影模糊，在 Chrome 中，阴影像素的不透明度从阴影区域的内部边缘到外部下降得更快，并且由于在这个例子中阴影的内部 1/3 隐藏在盒子下面，它看起来具有不同的起始颜色。如果我们通过将模糊半径和负扩散距离减少 5px 来使模糊完全可见，并用半透明的 rgba() 替换纯阴影颜色，则渲染的差异会变得不那么显着（演示）。

于 2013-07-04T09:34:22.930 回答
0

尝试使用-moz-box-shadowfirefox的属性，它会渲染得更好。

div{
  margin:100px;
  padding:100px;
  border:1px solid red;
  -moz-box-shadow: 0 80px 15px -85px #000;
  box-shadow:0 80px 15px -85px #000;
}
于 2013-07-04T08:50:03.823 回答