Firefox 多渐变背景错误答案

【问题标题】：Firefox multiple gradient backgrounds bugFirefox 多渐变背景错误
【发布时间】：2014-12-21 15:02:26
【问题描述】：

我的目标是给一些 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

【问题讨论】：

标签： css firefox linear-gradients

【解决方案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 关键字。

【讨论】：