css3 渐变

CSS 渐变：

 是在 CSS3 Image Module 中新增加的  类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。

---

CSS3渐变共有3种：

（1）线性渐变（linear-gradient）；

（2）径向渐变（radial-gradient）；

（3）重复渐变（repeating-linear-gradient）；

线性渐变，指的就是指在一条直线上进行渐变，在网页中大多数渐变效果都是线性渐变。

语法：background:linear-gradient(方向，开始颜色，结束颜色);

background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);   —16进制色

径向渐变：

CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。CSS3径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变

语法：background:radial-gradient(position ,shape size,start-color,stop-color)

重复渐变

重复渐渐repeating参数与线性渐变linear-gradient和径向渐变linear-gradient相同,重复渐变是在线性渐变和径向渐变基础上的延伸

repeating-linear-gradient   重复线性渐变

repeating-radial-gradient   重复经向渐变

background-image: repeating-linear-gradient(to bottom,orange 0,green 20px);

 

参考地址

http://www.runoob.com/css3/css3-gradients.html

http://caibaojian.com/css3/values/image/linear-gradient().htm