gradient主要用于渐变，来实现一些特效，现在网上已经有了很多较好的文章，以我现在菜鸟的级别估计很难写的比他好，所以在这里直接上链接
来自w3cplus：http://www.w3cplus.com/content/css3-gradient
在这里我主要来讲一下可以用它来做什么好玩的东西（一下均在谷歌浏览器中运行）
案例一：滚动条（先上图）
瞧上面那个图就是用线性渐变（当然还有一个镜像渐变）做成的，那是怎么做成的呢，直接上代码（其实很简单）。
<!--HTML部分--> <div class="gradient"></div>
/*CSS部分*/ .gradient{width: 200px;height: 20px;background: repeating-linear-gradient(45deg,greenyellow,greenyellow 5px,#e5e5e5 5px,#e5e5e5 10px);}
直接从linear-gradient讲起，首先看第一个参数45deg，它是用来控制渐变的方向的，
如果为0将是这样的效果：
45deg:
90deg:
估计现在都明白了。然后就是后面的greenyellow,greenyellow 5px,#e5e5e5 5px,#e5e5e5 10px。我们其实可以分成两组看
第一组：greenyellow,greenyellow 5px这个代表起点和终点都是greenyellow，但是要多宽呢，实际上是5px，因为前面那个是从0开始，那么就出现了一条绿色带，然后灰色带也是这样形成的（第二组：#e5e5e5 5px,#e5e5e5 10px）只不过，如果要实现中间没有渐变的效果，#e5e5e5的起点就必须是5px位置处，如果是10px,那么5px~10px之间就会是greenyellow~#e5e5e5的渐变色。
为了方便观察，我们用下面的代码
.gradient{width: 200px;height: 20px;background: repeating-linear-gradient(90deg,red,red 10px,#000 10px,#000 20px);}
.gradient{width: 200px;height: 20px;background: repeating-linear-gradient(90deg,red,red 10px,#000 20px,#000 30px);}
再看上面代码绿色变化的部分，
这时我们发现在10~20px之间就会有渐变色。（就是为了说明这个小问题，也是够拼的）
最后就是将linear-gradient变成repeating-linear-gradient。意思和background-image：repeat，差不多。
那么我们滚动条的背景图片就成了。
案例2：同心圆箭靶
<div class="radial-gradient">div>
.radial-gradient{width: 100px;height: 100px;border: 1px solid blueviolet;border-radius: 50px; background: repeating-radial-gradient(circle,red, red 5px,orange 5px, orange 10px);}
效果：
circle代表以圆形向外渐变，ellipse则为椭圆，用法和线性渐变差不多，自己多动动手就会了。
当然如果有兴趣可以去这个网站看一下，gradient还可以做出哪些特效：http://lea.verou.me/css3patterns/
原文：http://www.cnblogs.com/djlxs/p/5264868.html