css3 gradient 详解

CSS3 Gradient

Gradient 分为线性渐变 linear-gradient 和径向渐变 radial-gradient。因为很多浏览器需要加前缀，这里为了简单起见，所有的代码都只用最新的webkit标准写法。下面示例中的demo都是一个宽高都为200px的正方形div。

线性渐变

线性渐变的语法是：

background: linear-gradient([<point>||<angle>,]? <stop>, <stop>[,<stop>]*)

解释一下几个参数就是：可以以一个可选的起始点或者角度开头，然后后面跟若干个停止点。

简单的线性渐变

比如一个简单的例子：

background: -webkit-linear-gradient(left top, red, green);

上面的代码的意思是，从左上角开始由红色渐变为绿色。最终效果是这样的：

如果我们没有定义起始点，那么默认是从上向下，垂直渐变。所以下面的写法是等价的:

background: -webkit-linear-gradient(top, red, green);background: -webkit-linear-gradient(red, green);

使用角度进行旋转

第一个参数除了可以是起始点，也可以是一个角度，这个角度用整数表示顺时针，负数表示逆时针：

background: -webkit-linear-gradient(-45deg, red, green);

你自己写一下这么代码，会发现他和上面写的这样一段代码是等价的：

background: -webkit-linear-gradient(top left, red, green);

因为默认情况下是垂直从上到下，那么逆时针旋转 45度，不就是从左上角到右下角么。

增加多个停止点

我们可以增加多个颜色停止点，这样可以生成一个很复杂的背景。停止点的数量是没有限制的。

background: -webkit-linear-gradient(top left, red, green, orange, blue);

效果是这样的：

停止点也可以带一个位置，这个位置可以是像素值，也可以是百分比：

background: -webkit-linear-gradient(top left, red 20px, green 50px, orange);

上面的代码意思是，从 red 开始，到 50px 的时候变为 green，最后再变为 orange。
最终效果是这样的：

当然，你可以不用像素值，而用百分比实现：

background: -webkit-linear-gradient(top left, red, green 30%, blue 80%, orange);

结合背景图片使用

渐变是可以和背景图片一起使用的，而且背景图片的预发和平时的写法是一样的。而且写在前面的优先级会比较高，会盖在后面的图片上面。

background: url(http://gtms04.alicdn.com/tps/i4/TB11pawGVXXXXb8XVXXmqjTHFXX-60-60.png), -webkit-linear-gradient(red, red);

比如上面这个写法，url写在gradient之前，因此结果是一张图片直接覆盖在红色背景之上，如果反过来写：

background: -webkit-linear-gradient(red, red), url(http://gtms04.alicdn.com/tps/i4/TB11pawGVXXXXb8XVXXmqjTHFXX-60-60.png);

那么将完全看不见图片，因为红色不透明的背景把后面的图片盖住了。所以最好结合rgba透明来写。

结合background-size

因为背景图片可以重复，结合background-size，可以实现一些很精美的背景。

background: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);background-size: 20px;background-color: #99f;

效果如下：

径向渐变

径向渐变的语法和线性渐变很像：

-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

其中，第一个参数可以是位置或者角度，第二个参数可以是一个形状或者大小，后面都是颜色停止点。

简单的径向渐变

最简单的径向渐变如下：

background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

效果如下图所示：

当然，我们也可以指定样色停止点的位置：

background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

指定起始点和形状

和径向渐变完全一样的语法，可以通过 top left 等值或者一个百分比来指定起始点和结束点

background: -webkit-radial-gradient(top left, #ace, #f96, #1E90FF);

效果如图：

还可以增加一个形状：

background: -webkit-radial-gradient(top left, ellipse, #ace, #f96, #1E90FF);

在指定形状的时候，还可以指定整个大小，有三个值:
- farthest-corner 表示在容器较远的那条边结束
- closest-corner 表示在容器较近的那条边结束
- contaner 刚好填充满整个容器。

background: -webkit-radial-gradient(top left, ellipse farthest-corner, #ace, #f96, #1E90FF);

重复

有两种方式可以重复背景图片，一个使用background-repeat，另一个就是用 -webkit-repeating-radial-gradient 和 -webkit-repeating-linear-gradient。
我们可以做一个年轮一样的图片出来：

background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);

效果如图所示：

参考

• css gradient教程