是“顶部”和“顶部”线性梯度的方向相同？ [英] Are "top" and "to top" the same direction for linear gradients?

问题描述

linear-gradient（）的浏览器实现已发展为支持 top 和 to top 作为锚定值。

Browser implementations of linear-gradient() have evolved to support both top and to top as anchor values. Are they the same direction or opposites?

推荐答案

它们不是同一个方向;

They are not the same direction; they are opposites.

到顶部是bottom to top的缩写， top 表示从顶部开始。 ¹ 这不仅适用于其他方面，也适用于角落如 / code>和左下角。

to top is an abbreviation for "bottom to top", whereas top means "start from the top".¹ This is true not only for the other sides, but also for corners such as top right and bottom left.

方向关键字语法在CSS Images 3模块，这就是为什么许多实现早就使用了传统语法的原因。使用旧语法的最后一个公共工作草案是 here ;您可以看到一个注释确认其周围的明确模糊，最终导致在后续修订中使用关键字到。最新版本是此处。

Both directional keyword syntaxes were documented in the CSS Images level 3 module, which is why so many implementations made use of the legacy syntax early on. The last public working draft that made use of the legacy syntax is here; you can see a note acknowledging the sheer ambiguity around it, which eventually led to the use of the keyword to in subsequent revisions. The latest revision is here.

某些浏览器支持两种语法用于指示其供应商特定的 - * - linear-gradient（）函数中的线性渐变的方向，但是应当注意，标准化函数 linear-gradient（）只接受使用到关键字的新语法。 （如果浏览器在前缀函数中接受两个语法，那么它会过时或违反规范，并且应该报告。）

Some browsers support both syntaxes for indicating the direction of a linear gradient in their vendor-specific -*-linear-gradient() functions, however it should be noted that the standardized function linear-gradient() only accepts the new syntax with the to keyword. (If a browser accepts both syntaxes in the unprefixed function then it's either outdated or in violation of the spec, and should be reported.)

请注意，默认方向是 top 用于传统语法，到底部用于当前语法。这意味着默认方向是相同的，并且不变。

Note also that the default direction is top for the legacy syntax and to bottom for the current syntax. This means that the default direction is the same, and is unchanged.

还值得一提的是，如果您使用 - 无前缀，它已经考虑到了这种更改，但需要注意的是，您需要在单独的声明中包含这两种语法：

Also worth mentioning is that if you use -prefix-free, it already accounts for this change, with the minor caveat that you need to include both syntaxes in separate declarations:

如果不包含这两个版本，则级联会执行其工作并忽略后者版本：

If you include both versions, the cascade does its job and ignores the latter version if it’s not supported:

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

这两个语句将仅在需要前缀的浏览器中加上前缀，但不管浏览器将使用级联来确定它可以使用哪一个。

Both statements will be prefixed only in browsers that require the prefix, but regardless of that the browser will use the cascade to figure out which one it can use.

¹ _{如果来自关键字，则 top 和 将是等效的。}

¹ _{If there were a from keyword, then top and from top would be equivalent.}

这篇关于是“顶部”和“顶部”线性梯度的方向相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！