12

示例 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顶部的线性渐变。

在 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是它只是供应商。

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

4

2 回答 2

13

标准规定从 0° = 向上顺时针测量角度。

使用角度

就本论点而言，'0deg' 指向上方，正角表示顺时针旋转，因此 '90deg' 指向[sic]向右。

-moz-linear-gradient，另一方面，使用极坐标（强调我的）：

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

于 2012-10-13T00:10:09.953 回答
0

一个简单的技巧可以是使用关键字bottom而不是度数。

于 2012-10-18T00:01:33.700 回答