Question

示例CSS：

background-image: -moz-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -ms-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -o-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -webkit-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: linear-gradient(90deg, #e8f0ff, #ffffff);

这通常会导致线性渐变从底部的#e8f0ff到顶部的#fff。

Post-Firefox 16（几天前发布），渐变现在从左边的#e8f0ff到右边的#fff。

当我删除特定于供应商的CSS时，只留下：

background-image: linear-gradient(90deg, #e8f0ff, #ffffff);

什么都没发生。但是，当我删除该行并仅留下特定于供应商的样式时：

background-image: -moz-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -ms-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -o-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -webkit-linear-gradient(90deg, #e8f0ff, #ffffff);

纠正了这个问题。

那么FF16的新功能在这里发生了什么？ Xdeg值是否从新方向开始，是否仅在某些情况下才会合并在一起？我无法弄清楚为什么180deg会同时使用90deg或只使用一般，{{1}}如果它只是供应商。

问题是，Firefox的这种新行为的具体细节是什么？对于那些现在在FF16中出现错误方式的网站，最广泛，最符合标准的解决方案是什么？

Answer 1

The standard表示从0°=向上顺时针测量角度。

使用角度

出于此参数的目的，'0deg'指向上方，正角度表示顺时针旋转，因此'90deg'指向 [sic] 指向   右边。

-moz-linear-gradient, on the other hand, uses polar coordinates（强调我的）：

前缀变体和未加前缀的提案之间仍然存在最后的语义好奇心。在最初的Apple提议之后，语法的前缀变体都使用了<angle>定义的极角，即0deg代表东方。为了与CSS的其余部分保持一致，规范定义了一个角度，其中0deg代表North。为了防止使用该属性的前缀版本的网站突然中断，即使在适应其他前向兼容的最终语法时，它们仍保持原始角度定义（0deg = East）。在取消固定属性时，它们将切换到正确的规范。此外，由于它们不兼容，Gecko支持前缀，带有to关键字和无关的语法。同样，在没有修正的情况下，将删除没有关键字的语法。

Answer 2

一个简单的黑客可以使用关键字bottom而不是度。

为什么Firefox 16会改变线性渐变的方向？

2 个答案:

使用角度