替代线性渐变，你可以使用重复的线性渐变：标注色标值，然后无间断地重复它们。用百分比的话就没有太大的意义，但用像素或者其他单位的，它可以实现非常酷的效果。例如：
background-image: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
渐变以明亮的纯红色开始，在20像素的位置之后渐变为深红，随后在40像素的位置渐变回纯红色。这是一个重复的渐变，它会重复这个图案到块的结束。像Figure6所示
Figure 6: A repeating gradient example.
最后感谢 Jessica 同学。
更多复杂的例子 ↓
一个很酷的技术，在渐变中改变颜色的alpha通道的值，例如：
background-image: -o-linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5));
我们用RGBA，在渐变开始时alpha值是1，在渐变结束时alpha值是0.5。我没有使用红、绿、蓝三个色值，但我却完成一个很棒的效果，如Figure5如示
Figure 5: Varying transparency along a gradient to give a cool semi-seethrough effect.
继续浏览重复的线性渐变
渐变可以指定位置做色标标明特别的颜色。在一个渐变里你可以指定许多色标只要你喜欢，浏览器会计算出这些色标间的所有颜色。一起看一个例子，从top left到bottom right渐变，从亮红色到暗红色
background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(150,0,0));
等同于下面的写法：
background-image: -o-linear-gradient(top left,rgb(255,0,0) 0%,rgb(150,0,0) 100%);
在这个渐变块，我们一个色标在0%处，一个在100%处。但是你没看到一个坐标值，是因为它是默认的。反而，在开始和结束添加色标是非常有用的。例如：
background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 50%,rgb(50,0,0) 75%,rgb(150,0,0));
这边我们从一个亮红色，50%深红色，75%再深一点的深红色，最后一个稍微亮的深红色。如Figure 3所示
Figure 3: A linear CSS gradient with multiple colour stops.
百分比的方式，是一种非常万能的做法，它将为你展示CSS渐变是多么地灵活多变。即便渐变是应用在一个改变宽度，高度当浏览器窗口重置大小时的不固定的布局里，它也总是适用的。
当然你也可以用像素代替百分比，例如：
background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 100px,rgb(50,0,0) 200px,rgb(150,0,0));
这意味着色标总是标在从渐变开始的100像素和200像素，不管浏览器窗口重置大小。如果你想，你可以改变色标的开始和结束的位置——它们不必要在块的开始和结束位置。在这种情况下，在色标开始前是一个固定的颜色，在色标结束后是一个固定的颜色。例如：
background-image: -o-linear-gradient(360deg,rgb(100,100,100) 50% ,rgb(200,200,200) 75%);
你会得到Figure4结果
Figure 4: Moving the start and end colour stops.
继续浏览透明渐变
在第一个例子里，我们没特别指定方向或角度，渐变方向默认是至上而下。相当于这样子写：
background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200));
角度值放在渐变信息里开始处，用颜色用逗号隔开。你可以通过改变这些关键字来指定渐变方向从top，bottom，left或者right。
Figure 2: altering the angle keyword between top, bottom, left, and right, respectively.
你也可以改变top left, top right, bottom left 和 bottom right，实现对角渐变。
另一方式就是设定角度值，例如
0度等于left
90度等于bottom
180度等于right
270度等于top
360度等于left
上述让你清楚地知道角度值的工作原理。试着去玩玩，看看你所实现出来的渐变。
继续浏览CSS3 线性渐变-色标
据我们所知，我们都曾使用过颜色渐变来美化站点和为站点增色，而如果你想创建一个具有精制外观的按钮、面板、进度条或者其他UI界面，那么颜色渐变是必要。
到目前为止，我们一般是平铺背景图片来制造渐变效果。其CSS语句很简单，用Photoshop, Fireworks或其他图形工具来做一个渐变图片也不是一件难事。然后这种方式是相当地不灵活。假设你想要不同的配色方案或者其他渐变效果，你需要重返你的图形工具制作另一张图片。那么如果你可以完全使用CSS控制颜色渐变岂不是更好？
在CSS Image Values and Replaced Content Module Level3中CSS3提出了解决方法：这些模块定义了CSS渐变，它允许我们用纯CSS打造任何渐变。在这篇文章，我将提出怎样使用线性和多次线性渐变。目前Opera 11.10+, Firefox 3.6+, Safari 5.03+ 和 Chrome 7+支持。
Note:径向渐变暂不被Opera支持，且效果也有点不同。我们在后期会把它加入支持当中且为它单独撰写一篇文章。IE9目前还不支持CSS渐变，但是你可以在IE9中用SVG渐变来弥补IE9这个缺陷。
在Gradients demo例子中，我提供了一些简单的例子供你试验。在通读以下的章节后，你可以把这些示例下载下来，试试修改不同的参数看看都有什么好玩的效果。在代码里，你会发现我给不同的版本加上不同的供应商前缀来支持不同浏览器。这个例子能通过新版的opera, Firefox, Safari和Chrome。
做一个基本的线性渐变，需要提供一个起点值和结束值，例如
background-image: -o-linear-gradient(rgb(100,100,100),rgb(200,200,200));
如Figure1所示，创建了一个从顶到底的深灰色到浅灰色的渐变。这边我只是把它应用到一个article元素里，你可以应用到任何你所喜欢的block元素上。
Figure 1: A really basic CSS3 linear gradient.
为什么渐变是写到background image而不是看起来更为合理的background color？这是出于灵活和使用者的习惯考虑。过去我们总是通过CSS背景图片来实现渐变，而现在只要你喜欢，你可以使用CSS将颜色渐变应用于多个图片背景层。
继续浏览CSS3 线性渐变-不同渐变角度