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

【问题标题】：Are "top" and "to top" the same direction for linear gradients?线性渐变的“顶部”和“顶部”方向是否相同？
【发布时间】：2013-10-29 11:34:36
【问题描述】：

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

【问题讨论】：

标签： css linear-gradients

【解决方案1】：

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

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

这两种方向关键字语法都记录在 CSS 图像级别 3 模块中，这就是为什么这么多实现在早期使用旧语法的原因。使用遗留语法的最后一个公共工作草案是here；你可以看到一个注释，承认它周围的完全模棱两可，最终导致在后续修订中使用关键字to。最新版本是here。

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

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

另外值得一提的是，如果您使用 -prefix-free、it already accounts for this change，但需要注意的是，您需要在单独的声明中包含这两种语法：

如果您同时包含这两个版本，则级联会执行其工作，如果不支持则忽略后一个版本：
background: linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);

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

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

【讨论】：

【解决方案2】：

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

这是fiddle。 MDN 有full details and history。

【讨论】：

您应该将其余的前缀添加到您的小提琴中。
@BoltClock 你抓住了我。希望我能把那个滑过去。现在那里的品种很好。不必添加旧的 webkit 和咒语。
哈哈抱歉，那你会想避免碰到我的——我对那种事情很挑剔。我赞成您的答案，因为它是正确的，但我添加了自己的答案以扩展该主题。