CSS3 渐变
引言
WebKit 早在 2008年初 就通过添加对 -webkit-gradient 的支持，为 CSS 中的渐变铺平了道路，自推出以来它们已被广泛使用。
在过去几个月里，CSS 工作组就如何使渐变语法更易于使用进行了广泛讨论，最近 Tab Atkins 在 图像值和替换内容模块 的最新草案中提出了一项提案。WebKit 和 Mozilla 现在已经实现了这项提案，以便网页作者可以进行实验并向工作组提供反馈。请注意，该提案仍处于编辑草案阶段，这意味着它仍然可能，甚至很可能会因用户反馈而改变。
新语法的主要目标是简洁；现在编码常用渐变变得非常容易，正如您将在下面的示例中看到的那样。次要目标是指定一个在浏览器之间兼容的实现。
如果您还没有运行最新版本，请去获取一个最新的 每夜构建版本，这样您就可以看到这篇帖子中的示例。
以下是一些简单示例（请注意，所有这些示例都可以调整大小，因此您可以看到调整框大小如何影响渐变）
background-image: -webkit-linear-gradient(red, green, blue);background-image: -webkit-radial-gradient(circle, white, black);别忘了渐变是一种生成的图像，而不是一个属性。这意味着您可以在任何使用 url(image.png) 的地方使用它们。
新渐变语法
新语法有四个渐变函数
linear-gradient()radial-gradient()repeating-linear-gradient()repeating-radial-gradient()
这些名称不言自明，但我稍后会详细介绍重复渐变。一个优点是重复和非重复变体的语法是相同的。
由于此规范仍处于草案形式，我们已为这些渐变函数添加了 -webkit- 前缀。稍后当规范脱离草案阶段时，您将能够不带前缀地使用它们。
线性渐变
由于填充元素框是渐变最常见的用途，因此这是 线性渐变 的标准行为。您只需考虑渐变要运行的方向。
有两种方法可以指定此方向。首先，您可以指定渐变开始的边或角
-webkit-linear-gradient(left, white, black)-webkit-linear-gradient(top right, white, black)您甚至可以省略第一个参数，它将默认为 top，生成垂直渐变。
在第二种形式中，您可以指定渐变轴的角度
-webkit-linear-gradient(135deg, white, black)角度逆时针运行，0deg 在右侧。请注意，在所有这些情况下，渐变刚好足以填充框。
径向渐变
径向渐变 稍微复杂一些，因为有更多关于如何填充框的选项。在最简单的形式中，渐变居中于框中，并足够大以填充到角落
-webkit-radial-gradient(white, black)这等同于 -webkit-radial-gradient(center, ellipse cover, white, black)。那个可选的第一个参数 center 也可以是一个点（就像 background-position），这允许您将原点放在其他地方
-webkit-radial-gradient(10% 30%, white, black)位置后面的参数以两种方式之一指定渐变的形状和大小。第一种方式使用一些关键词表示形状（circle, ellipse）和大小（closest-side, closest-corner, farthest-side, farthest-corner, contain, cover），它们都是自描述的。例如
-webkit-radial-gradient(30% 30%, closest-corner, white, black)-webkit-radial-gradient(30% 30%, circle closest-corner, white, black)如果您愿意，您可以明确指定渐变的结束半径，并分别指定水平和垂直轴的半径
-webkit-radial-gradient(center, 5em 40px, white, black)颜色停止点
用新渐变指定颜色停止点非常容易；在最简单的情况下，您只需提供一个颜色列表
-webkit-linear-gradient(left, red, green, blue)这会导致颜色均匀地分布在渐变中。如果您喜欢，您可以定位特定的停止点，然后让浏览器在这些停止点之间分布其余的颜色
-webkit-linear-gradient(bottom left, red 20px, yellow, green, blue 90%)这些长度沿渐变轴，渐变轴可能是对角线；百分比是相对于该对角线长度的。
在同一位置的颜色停止点会导致颜色的急剧变化
-webkit-linear-gradient(top left, red, yellow, green 60%, purple 60%, blue)重复渐变
重复形式 repeating-linear-gradient() 和 repeating-radial-gradient() 与简单形式的语法完全相同，但通过重复停止点来填充整个渐变
-webkit-repeating-linear-gradient(left, red 10%, blue 30%)停止点通过简单地端对端对齐来重复，这通常会导致尖锐的边界。您可以通过重复最后一种颜色来避免这种情况
-webkit-repeating-radial-gradient(top left, circle, red, blue 10%, red 20%)与 -webkit-gradient 的变化
您应该能够使用这种新语法重新创建您使用 -webkit-gradient 创建的大多数渐变，但有一些变化需要注意。
首先，-webkit-gradient 使用两点语法，允许您明确指出线性渐变的起点和终点。linear-gradient 摒弃了这种方式，转而支持方便的填充框行为。如果您确实希望渐变在框边缘之前停止，可以通过颜色停止点位置来实现。
同样，radial-gradient 不再允许您为径向渐变指定不同的起点和终点，因此新的径向渐变始终是同心的。但是，您可以使用新语法生成椭圆渐变，这在使用 -webkit-gradient 时是不可能的。
那么 -webkit-gradient 会消失吗？当然不会！我们将在可预见的未来继续支持 -webkit-gradient，以支持所有现有使用它的内容。
请提供反馈
重申一下，我们已经实现了对这些新渐变的支持，以便您，作为网页开发者和作者，可以提供反馈。讨论渐变语法和行为的正确论坛是 www-style 邮件列表。如果您在实现中发现错误，请在 bugs.webkit.org 提交错误报告。