Question

在没有CSS3的时候，如果想做一个背景渐变效果，就得使用一个很细的渐变切片进行水平/垂直平铺。对于使用图片而言，这确实是一种很好的折中方案。一张仅有一两像素宽的图片，不会给宽带造成太大负担，而且它可以用在网站的多个元素上。

6.3.1　线性背景渐变

使用上面说过的技巧，来给AND THE WINNER ISN’T网站的侧边栏制作一个背景渐变效果：

浏览器中的效果如下：

如果想修改渐变效果，还得使用图像编辑软件。另外，内容可能因为超出固定尺寸限制而偶尔溢出渐变背景。这个问题在响应式设计中简直无法忍受，因为我们想让页面结构能随意改变形状（比如变高或变宽），但不会破坏设计效果。

例如，假设我想给侧边栏中的每个模块再追加两部电影。效果如下：

效果不是太差，但灰色渐变没有按照我喜欢的那样覆盖整个侧边栏。这时我又不得不回到图像编辑软件中重新制作渐变图片。如果使用CSS3渐变，就会灵活很多。用纯CSS3就可以做出和上面一样的渐变，而且不用图片，代码如下：

在支持该特性的浏览器中，效果如下所示：

不论这块区域有多高（毕竟，评分差不多的好电影和烂电影有很多），CSS3渐变始终能覆盖整个区域。

背景渐变唯一美中不足的是它不像其他一些CSS3特性那样被广泛支持。比如IE 9就没有对它的原生支持（微软承诺在IE 10中支持）。其他大多数浏览器都支持背景渐变，不过都是以私有前缀方式。不过这并不足以阻止你使用该特性来增强设计效果，因为有很多浏览器现在已经支持该特性，而剩下的浏览器在不久的将来也会支持。作为老版本浏览器的降级方案，最好先定义一个固定背景颜色，这样老版本浏览器在无法识别渐变规则的时候，至少会渲染出一个实色的背景。

注意：过去曾有几种不同的背景渐变语法

过去，针对同样的背景渐变效果，不同的浏览器厂商使用不同的语法来实现。Webkit是这个问题的罪魁祸首，不过庆幸的是，从Safari 5.1开始，Webkit采用了和Mozilla一样的做法——也就是W3C公布的做法。

分解线性渐变语法

线性背景渐变语法可能有点复杂，所以我们对其做一个分解：

圆括号中的第一个值（即例子中的90deg，可选）定义了渐变的方向。不定义该值则默认是一个垂直从顶部到底部的渐变。你还可以使用如to top right这样的值，这会产生一个朝向右上角的对角线渐变。

下一个值（例子中的#ffffff 0%）定义的是渐变的“起点”，包括起点的颜色和位置。你也可以使用像blue 20%这样的值，这样就是从蓝色开始渐变到下一个颜色，而渐变开始位置则位于假想的渐变路径的20%处。同样，起点位置也可以使用负值，这样渐变从实际可见区域之外就开始了。比如：

上面这行代码意味着渐变从可见区域之外开始，假想的渐变路径比可见区域长50%。

下一个值指的是“过渡颜色点”。我们来回顾一下：沿着90度垂直方向，从白色开始（（#ffffff 0%），向位于渐变路径50%处的#e4e4e4这个颜色（浅灰色）渐变。这里就是渐变中的第一个过渡颜色点。如果需要的话，可以在渐变“终点”之前定义更多的过渡颜色点（使用逗号分隔）。

圆括号中的最后一个值始终是渐变的“终点”。不论在起点之后放置了多少个过渡颜色点，最后一个值始终是终点。

想要了解线性渐变的W3C规范，请参阅http://dev.w3.org/csswg/css3-images/#linear-gradients。

6.3.2　径向背景渐变

CSS3背景渐变不只局限于线性渐变，制作径向渐变同样简单。径向渐变是从一个中心点开始，依据椭圆形或圆形进行扩张渐变。

径向背景渐变的语法如下所示：

将这个声明追加到#content规则中，产生的效果如下图所示：

看到页面四角慢慢变暗的效果了吧？这就是径向渐变。我们来对其做一个语法分解，看看它是如何运作的。

分解径向渐变语法

在background属性之后，我们设定的值是radial-gradient（而不是linear-gradient）。然后在圆括号中设定起点。在上一节的例子中我们用的是center，其实也可以使用如25px 25px这样的值，这就表示从距元素上边和左边均为25像素的那个点开始渐变。例如：

这行代码产生的效果如下图所示：

中心点距离元素上边和左边均为25像素，然后向四周平滑辐射。声明中的下一个值更简单，它指的是径向渐变的形状和大小：

渐变形状要么是circle（圆形，渐变会均匀地向各个方向辐射），要么是ellipse（椭圆形，在不同的方向辐射量不同）。而渐变形状的大小则有很大的灵活性，大小值可以是下列任何一种。

closest-side：（渐变形状是圆形时）以距离中心点最近的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最近的水平或垂直边为渐变半径。

closest-corner：以距离中心点最近的一角为渐变半径。

farthest-side：和closest-side正好相反，（渐变形状是圆形时）以距离中心点最远的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最远的水平或垂直边为渐变半径。

farthest-corner：以距离中心点最远的一角为渐变半径。

cover：和farthest-corner完全一样。

contain：和closest-side完全一样。

接下来是定义渐变起点、过渡颜色点以及终点（这部分和线性渐变是一样的）。

例如，我们将之前的规则改成如下这样：

可以看到，我们是以距离左边和上边均为20像素的点为中心点，使用圆形渐变，渐变半径覆盖整个元素显示区域，并使用了多组HSL（A）的过渡颜色点。效果如下：

这效果从美学角度讲确实不敢恭维，但我希望这能说明使用纯CSS3制作视觉效果的无穷威力。

想要了解W3C对背景渐变的标准定义，请参阅http://dev.w3.org/csswg/css3-images/#radial-gradients。

制作完美CSS3渐变的简便方法

如果写出一个CSS3渐变对你来说有点难度，那你可以考虑使用在线渐变生成器。我个人最喜欢的渐变生成器是http://www.colorzilla.com/gradient-editor/。它的用户界面风格很像图像处理软件，你可以选择颜色、过渡点、渐变风格（线性渐变或径向渐变），甚至可以选择自己喜欢的颜色空间（HEX、RGB（A）、HSL（A））。这个在线渐变生成器还会加载一些预置的渐变供你选用和修改。如果这些还不足以打动你，须知它还提供了可选的代码设置，用来修正IE 9，让它显示渐变效果，而且还为老版本浏览器提供了备用的背景颜色。还是不动心？它还能基于已有的图片直接生成渐变，这个功能怎么样？我想这下总该打动你了。

6.3.3　重复渐变

CSS3还可以让我们制作重复背景渐变效果。我们来看看如何实现：

在侧边栏上应用后的效果如下：

首先给linear-gradient或radial-gradient前面加一个前缀“repeating”，后面的语法和普通渐变一样。此处我在白色和灰色过渡颜色点之间使用了像素距离（分别是0px和5px），百分比也可以。为了达到最好效果，建议在同一个渐变中使用相同的度量单位（像素或百分比）。

我们来试着写一个重复径向渐变：

语法和之前标准的径向渐变相似。我只是修改了渐变起点，删除了此处不需要的“cover”值，然后给每个过渡颜色点设置了像素距离。例子中的终点距离是20像素，所以渐变每20像素就会重复一次。应用在body上的效果如下图所示。我先警告你——效果不好看！

想要了解W3C对重复渐变的标准定义，请参阅http://dev.w3.org/csswg/css3-images/#repeating-gradients。

另外，还有一种使用背景渐变的方法，我很想分享给你。