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

我在考虑依靠box-shadow，但即使在Firefox和Chrome/Chromium上呈现出不同的呈现方式。差异很小，值很低，但在较大值时非常明显。CSS box-shadow在Firefox和Chrome上呈现不同

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

HTML：

<div> 
    Hello there! 
</div>

CSS：

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

Differences with Chromium and Firefox, first example

我怎样才能解决这个问题呢？或者，也许我现在应该放弃box-shadow？

来源

2013-07-04 Jorge Suárez de Lis

浏览器

使用不同的算法来生成阴影模糊，在铬阴影像素的不透明度从阴影区域到外的内边缘更迅速减小，并且由于阴影的内三分之一是在此示例中隐藏在框下方，它看起来具有不同的起始颜色。如果我们通过将模糊半径和负向散布距离减少5px来使模糊完全可见，并用半透明rgba（）替换实心阴影颜色，则渲染差异变得不太重要（）。

来源

2013-07-04 09:34:22

谢谢，这看起来很有希望！由于我必须调整几个阴影，不过，应该花一些时间来检查这个阴影。 –

这种方法就像一个魅力！谢谢！：d –

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

来源

2013-07-04 08:50:03

'-moz-box-shadow'似乎在Firefox 21中完全被忽略:( –

把-moz-box-shadow放在正常的box-shadow之上，然后它应该可以正常工作，看看我的编辑。 –

它可以工作，但是就像删除'-moz-box-shadow'一样，也就是'-moz-box-shadow'似乎对我没有任何帮助。 –

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

回答

相关问题