示例 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
,但如果它只是供应商,则只做 90deg
。
问题是,Firefox 的这种新行为的具体细节是什么?对于现在在 FF16 中出现渐变错误的网站,最广泛、最符合标准的解决方案是什么?
最佳答案
The standard指示 Angular 从 0° = 向上开始顺时针测量。
using angles
For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point [sic] toward the right.
-moz-linear-gradient
, on the other hand, uses polar coordinates (强调我的):
A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an
<angle>
defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.
关于firefox - 为什么 Firefox 16 改变了线性渐变的方向?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12868704/