CSS3--gradient

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/