css - Firefox 多重渐变背景错误

Question

我的目标是给一些 div 一个顶部和左侧的内部阴影。为此，我为 div 提供了两个带有 linear-gradient 的背景图像:

background-image: linear-gradient(90deg, #263B4B  0, transparent 50px),
                  linear-gradient(180deg, #263B4B  0, transparent 50px);

这在 Chrome 39 和 IE 11 中看起来不错，但在 Firefox 32 中不是。Firefox 无法正确显示它。

起初，我有以下 CSS，效果很好，但由于有很多带有此阴影的 div，页面呈现速度极慢甚至无法使用，尤其是在移动设备上。所以我不想使用 box-shadow。

box-shadow: 18px 31px 95px 0px rgba(0, 0, 0, .2) inset;

如何在不使用图像文件的情况下让它在 Firefox 上运行？

JSFiddle:http://jsfiddle.net/eLkhwoqg/2

Answer 1

Firefox 在其他颜色停止和 transparent 关键字之间的插值不太正确。因为 transparent 对应于 rgba(0, 0, 0, 0)，Firefox 使用该值来计算渐变，除非它是在非预乘 RGBA 空间中这样做，这会导致渐变从您给定的颜色过渡到黑色。我们知道这种行为实际上是不正确的，因为 spec这么说。

幸运的是，解决方法很简单:只需 use a zero alpha version of the same color you're using Firefox 将正确插入渐变:

background-image: linear-gradient(90deg, #263B4B  0, rgba(38, 59, 75, 0) 50px),
                  linear-gradient(180deg, #263B4B  0, rgba(38, 59, 75, 0) 50px);

修复此问题后，您将能够继续使用 transparent 关键字。