线性渐变关键字 - Linear Gradient Keywords

CSS中的linear gradient(线性渐变)可能会导致各种各样的怪异和怪异的结果。其中的一些怪异在于它的语法。

我事先说明下：我在这里讨论的一些内容并没有被广泛的实施，关于这些内容甚至都没有板上钉钉。虽然接近，但是仍然可能会有变动。即使不做出变动，这也不是一篇“你可以立刻使用的消息”文章。就像 我所创作的如此多的文章 那样，该篇文章更像是对CSS中某个小角落的溜达，仅仅是查看 我们将来可能看到的内容。

尽管线性渐变表面上看起来复杂，但是它还是相当简单的。你定义一个渐变的方向，接着列出你所需要的color stops(color stops的数量你可以随意指定，一般都是>=2个)。在指定线性渐变的过程中，你实际上使用文本描绘了一张图片，某种程度上类似于SVG所做的那样。这是个要谨记的关键点：linear gradient(或radial gradient)是一张图片，就像 任意的GIF或PNG图片 那样。这也就意味着：你可以通过使用多个background语法 在某个元素的背景中 混合使用 ‘位图(数字图片，如.gif, .jpg, and .bmp.)和渐变图片’。

让我们回到渐变。这儿有一张非常简单的渐变图片：

linear-gradient(45deg, red, blue)

45度角定义了渐变线的方向，渐变线就是定义‘渐变前行方向’的那条有方向的线。渐变线通常穿过背景区域的中心，渐变线的方向是由你声明的，也就是作者。在这个例子中，渐变线的方向被声明为‘指向45度角的方向’。red, blue是color stops。既然red, blue没有定义stop distances，该距离被默认为red 0%, blue 100%。这也就意味着一个由红到蓝的渐变，0%距离的颜色为纯红，100%距离的颜色为纯蓝，0~100%距离的颜色为混合色，该渐变沿着渐近线前进。

你也可以创建hard stops:

linear-gradient(45deg, green 50%, lightblue 50%)

上面的渐变会让你得到图片1中展示的结果，在该图中我已经添加了箭头来表明渐近线的方向，也添加了背景区域的中心点。在渐变中的每个条纹都是垂直于渐变线的；这也就是‘为什么2种颜色在50%距离的边界 会垂直于 渐近线’。 Figure 1

http://meyerweb.com/pix/2012/04gradients01.gif

需要指出的是：线性渐变的角度是罗盘角（有别于数学上的角度）。罗盘角是以背景区域的中心点为中心，竖直向上的角度为0度。顺时针角度增加，逆时针角度为负。当然你也可以使用‘方向关键字’，这里主要有2种类型的'方向关键字'。 罗盘角

http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Compass_Card.png/300px-Compass_Card.png

http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Compass_Card.png/300px-Compass_Card.png

第一种使用关键字的方式是仅仅声明一个方向，top, bottom, right, left中的某2个任意搭配。在这个例子中 令人恐慌的地方 在于：你声明了渐近线是从哪个方向起始的，不是渐近线指向的方向；也就是 你指定了渐近线的起始位置而不是目标方向。所以，如果你想要你的渐进方向由从左下角向右上角，你实际上要声明的是bottom left:

linear-gradient(bottom left, green 50%, lightblue 50%)

但是bottom left并不等于45度，除非背景区域是正方形。如果背景区域不是正方形，那么渐近线就从背景区域的一个角指向对角，并且边界线是垂直于渐近线的，就像图2展示的那样。同样的，为了阐述清楚，我也添加了渐近线和中心点。 Figure 2

http://meyerweb.com/pix/2012/04gradients02.gif

当然，这就意味着：如果背景区域在任意方向的尺寸(宽, 高)发生改变，那么渐近线的角度也会发生改变。如果背景区域变得更高或者更窄，渐近线会逆时针旋转；变得更矮或者更宽，渐近线会顺时针旋转。这可能正是你所想要的。不同于角度值，角度值 在背景区域的尺寸发生改变时 渐近线是永远不会旋转的。

第二种使用关键字的方式 看起来是类似的，但是会有截然不同的结果。你同样可以使用top/bottom/left/right某2个的任意搭配，但是你需要额外添加关键字to，像下面这样：

linear-gradient(to top right, green 50%, lightblue 50%)

在这个例子中，你在声明渐近线的目标位置，并不是起始位置，这是要清楚的；毕竟，你声明的是to top right。然而，当你使用这种方式时，你不是指定背景区域的右上角。你指定了一个大致的向上向右的方向。你可以查看在图3中查看到上例的结果；同样地，也添加了渐近线。 Figure 3

http://meyerweb.com/pix/2012/04gradients03.gif

注意这个hard-stop边界线，它实际上从左上角延伸到了右下角(没有一个是右上角)。这是因为：在关键字前加上to，你就触发了所谓的magic corners行为。当你这样做的时候，不管背景区域的尺寸如何改变，边界线总是从左上角延伸到右下角。这些是‘magic corners’。因此，渐近线并不是指向背景区域的右上角，除非背景区域是完美地正方形 - 此时渐近线才指向背景区域的右上角的象限(数学中的第一象限)。显然，术语magic quadrants不比magic corners更合理。

改变背景区域的尺寸同样会使渐近线 旋转。减少背景区域的高度 或者 增加背景区域的宽度 会使边界线逆时针旋转(同样的渐近线也会逆时针旋转)；增加高度 或者 减少宽度 会使边界线顺时针旋转(渐近线顺时针旋转)。唯一的不同在于起始状况。

除此以外，如果你想要使用关键字 来使 渐近线指向背景区域的某个角，像图2中的那样，不要指定目标位置(而是应该指定起始位置)。同样地，你也不能声明一个起始象限。让渐近线从某个角延伸到对角 意味着：要声明渐近线的起始位置(图2)。如果你想要得到magic corners效果(50%位置的color-stop line从某个角延伸到对角，即边界线从某个角到对角)：要声明目标象限(图3)。

关于实际的支持：截止到‘写这篇文章’为止，只有Firefox和Opera支持magic corners。所有目前的浏览器 - 包括IE10 - 支持角度和non-magic关键字，也就是说Opera和Firefox支持2种方式的关键字。

这是目前linear gradient有关事情的状态。我有兴趣知道：你对于各种各样的关键字和行为是如何思考的 - （我知道 理解这2种方式 在开始时 是有些困难的，因为2中方式有着截然不同的效果 看起来让人困惑）。你说呢？

• 本文翻译自：http://meyerweb.com/eric/thoughts/2012/04/26/lineargradient-keywords/
• 转载请注明出处