css - 线性渐变的“顶部”和“顶部”方向是否相同？

Question

的浏览器实现linear-gradient()已经发展为支持top和to top作为锚值。它们是同向还是相反？

Answer 1

他们是对立的。 to top在元素底部使用第一个颜色参数，而top在顶部使用第一个颜色参数。

这是一个小提琴。MDN 有完整的细节和历史。

Answer 2

他们不是同一个方向；他们是对立的。

to top是“bottom to top”的缩写，而top意思是“从顶部开始”。¹这不仅适用于其他边，也适用于top right和等角bottom left。

这两种方向关键字语法都记录在 CSS Images level 3 模块中，这就是为什么这么多实现早期使用遗留语法的原因。使用遗留语法的最后一个公共工作草案在这里；您可以看到一个注释，承认它周围的绝对歧义，最终导致to在后续修订中使用该关键字。最新版本在这里。

一些浏览器支持两种语法，用于在其供应商特定的函数中指示线性渐变的方向-*-linear-gradient()，但是应该注意，标准化函数linear-gradient()只接受带有to关键字的新语法。（如果浏览器在无前缀函数中接受这两种语法，那么它要么已过时，要么违反规范，应该报告。）

另请注意，默认方向top适用于传统语法和to bottom当前语法。这意味着默认方向是相同的，并且没有改变。

另外值得一提的是，如果您使用-prefix-free，它已经说明了这种变化，但需要注意的是，您需要在单独的声明中包含两种语法：

如果您同时包含这两个版本，则级联将完成其工作，如果不支持后一个版本，则忽略它：

background: linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);

这两个语句只会在需要前缀的浏览器中加上前缀，但无论如何浏览器都会使用级联来确定它可以使用哪一个。

---

¹ _{如果有一个from关键字，那么topandfrom top将是等价的。}