CSS3渐变

欢迎访问的我的个人博客http://liubofeng.com/

CSS3 渐变

渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡
兼容性：

IE	Chrome	FireFox	Safari	Opera
10+	26+	16+	6.1+	12.1+
	10.0-webkit-	3.6-moz-	5.1-webkit-	11.6-o-

CSS3 线性渐变

线性渐变（Linear Gradients）属性
是沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变（从一边拉向另
一边）
语法:
background: linear-gradient(direction, color-stop1, color-stop2, …);

线性渐变 - 从上到下（默认）

background: linear-gradient(color-stop1, color-stop2, …);

 background: -webkit-linear-gradient(red, blue);
 background:    -moz-linear-gradient(red, blue);
 background:      -o-linear-gradient(red, blue);
 background:         linear-gradient(red, blue);
 //红色渐变到蓝色

线性渐变 - 从左到右

background: -webkit-linear-gradient( begin-direction, color-stop1, color-stop2, …);
background: -moz-linear-gradient( end-direction, color-stop1, color-stop2, …);
background: -o-linear-gradient( end-direction, color-stop1, color-stop2, …);
background: linear-gradient(to end-direction, color-stop1, color-stop2, …);

 background: -webkit-linear-gradient(       left top, red, yellow, blue);
 background:    -moz-linear-gradient(   right bottom, red, yellow, blue);
 background:      -o-linear-gradient(   right bottom, red, yellow, blue);
 background:         linear-gradient(to right bottom, red, yellow, blue);

线性渐变 – 对角

background: -webkit-linear-gradient( begin-level begin-vertical,
color-stop1, color-stop2, …);
background: -moz-linear-gradient( end-level end-vertical,
color-stop1, color-stop2, …);
background: -o-linear-gradient( end-level end-vertical,
color-stop1, color-stop2, …);
background: linear-gradient( to end-level end-vertical,
color-stop1, color-stop2, …);

线性渐变 – 使用角度

语法:
background: linear-gradient(angle, color-stop1, color-stop2, …);
角度说明
角度是指水平线和渐变线之间的角度，逆时针方向计算。
0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

线性渐变 – 颜色结点

语法:
background: linear-gradient( color1 length|percentage,
color2 length|percentage,
…
);

线性渐变 – 重复渐变

语法:
background: repeating-linear-gradient( color1 length|percentage,
color2 length|percentage,
…
);

CSS3 径向渐变

径向渐变（Radial Gradients）属性

从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）
语法:
background: radial-gradient(center, shape size, startcolor, …, last-color);

径向渐变 - 颜色结点均匀分布（默认）

background: radial-gradient(color-stop1, color-stop2, …);

径向渐变 - 颜色结点不均匀分布

background: radial-gradient(color1 length|percentage,
color2 length|percentage, …);

径向渐变 – 设置形状

语法:
background: radial-gradient(shape, color-stop1, colorstop2, …);
形状说明
circle —— 圆形
ellipse —— 椭圆（默认）

径向渐变 – 尺寸大小关键字

语法:
background: radial-gradient(size, color-stop1, colorstop2, …);
关键字说明
closest-side：最近边 farthest-side：最远边
closest-corner：最近角 farthest-corner：最远角

重复的径向渐变

background:repeating-radial-gradient(color1 length|percentage,color2 length|percentage)