CSS3渐变（Gradients）-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜⾊之间显⽰平稳的过度，包括透明度。
以前，你必须使⽤图像来实现这些效果。但是，通过Css3渐变(Gradients)，你可以减少下载的事件和宽带的使⽤。此外，渐变效果元素在放⼤时看起来效果更好，因为渐变(gradient)是由浏览器⽣成的。
CSS3定义了两种类型的渐变(gradients):
1.线性渐变(Linear Gradients)-向下、向上、向左、向右、对⾓⽅向：（to bottom、to top、to right、to left、to bottom right，等等）
lob2.径向渐变(Radial Gradients)-由他们的中⼼定义
datawarehou浏览器⽀持：
表中的数字指定了完全⽀持该属性的第⼀个浏览器版本。
后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能⽀持属性的第⼀个版本。
保留英文属性 IE Google FF Safari Opera
linear-gradient10.026.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
ava addams5.1 -webkit-
12.1
11.1 -o-
radial-gradient10.026.0
10.0 -webkit-
16.0
logon
加拿大城市
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-
repeating-linear-gradient10.026.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
repeating-radial-gradient10.026.0
10.0 -webkit-
美国专业排名雅思16.0
forth3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-
CSS3 线性渐变（linear-gradient/repeating-linear-gradient）
创建⼀个线性渐变，⾄少定义两种颜⾊结点，⽤于呈现平稳过度的颜⾊。同时，你也可以设置⼀个起点和⼀个⽅向（或⼀个⾓度）。
指定⽅向语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* } //标准写法
参数：
<angle>是⾓度，单位为deg
point ：第⼀个参数表⽰线性渐变的⽅向，可⽤关键字top、left、bottom、right，to top是从上到下、to left是从左到右，如果定义成to left top，那就是从左上⾓到右下⾓（to可省略）。
<stop > = <color> [ <length> | <percentage>]:
<color>：指渐变的起⽌颜⾊。
<length>：⽤长度值指定起⽌⾊位置，不允许负值。
<percentage>：⽤百分⽐指定起⽌⾊位置。
background: linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:linear-gradient(left top,yellow,blue);
background: repeating-linear-gradient(red, yellow 10%, green 15%);
1.线性渐变-默认情况下，从上到下
.divOne {
width: 100px;
height: 100px;
background: linear-gradient(red, blue);
}
<!--线性渐变-默认情况下，从上到下
1.⽀持IE10及以上浏览器
-->
<div class="divOne"></div>
2.线性渐变-从左到右
.divOne {
width: 100px;
height: 100px;
background: linear-gradient(to right, red, blue);
}
3.线性渐变-对⾓
.divOne {
width: 100px;
height: 100px;
background: linear-gradient(to bottom right, red, blue);
}
指定⾓度语法：
如果你想要在渐变⽅向上做更多的控制，你可以定义⼀个⾓度，⽽不⽤使⽤预定义的⽅向。
background: linear-gradient(angle, color-stop1, color-stop2);
⾓度是指⽔平线和渐变线之间的⾓度，逆时针⽅向计算。换句话说，0deg 将创建⼀个从下到上的渐变，90deg 将创建⼀个从左到右的渐变。
4.线性渐变-指定⾓度：
restaurant city.divOne {
background: linear-gradient(30deg, red, blue);
}
.divTwo {
background: linear-gradient(0deg, red, blue);
}
.divThree{
background: linear-gradient(90deg, red, blue);
}
5.线性渐变-使⽤多个颜⾊点：
.
divOne {
background: linear-gradient( red, green, blue);
}
.divTwo {
background: linear-gradient( red 10%, green 85%, blue 90%);
}
.divThree {
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
6.线性渐变-使⽤透明度（Transparent），透明度的渐变
CSS3 渐变也⽀持透明度（transparency），可⽤于创建减弱变淡的效果。
动漫歌曲歌词
为了添加透明度，我们使⽤ rgba() 函数来定义颜⾊结点。rgba() 函数中的最后⼀个参数可以是从 0 到 1 的值，它定义了颜⾊的透明度：0 表⽰完全透明，1 表⽰完全不透明。
.divOne {
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
.divTwo {
background: linear-gradient(to bottom, rgba(255, 255, 0, 0.3), rgba(0, 255, 255, 1));
}
7.重复的线性渐变-repeating-linear-gradient()
.divOne {
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
.divTwo {
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 0.3) 10%, rgba(0, 255, 255, 1) 20%); }
更多：
