css渐变用法详解

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

   1. CSS3 线性渐变(以标准语法为例)

1. 从上到下的线性渐变： background: linear-gradient(red, pink); /* 标准的语法 */
2. 从左到右的线性渐变：  background: linear-gradient(to right, red , pink); /* 标准的语法 */
3. 从左上角到右下角的线性渐变： background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
4. 使用角度的线性渐变： background: linear-gradient(30deg, red, blue); /* 标准的语法 */
5. 使用透明度（transparent）:background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
   
6.  重复的线性渐变 :background: repeating-linear-gradient(red, yellow 10%, green 20%);
   

tip:css渐变最少使用两种颜色节点

  /* 从上到下的线性渐变： */
		.div2{

			width: 200px;
			height: 200px;
			background: -webkit-linear-gradient(red, pink); /* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(red, pink); /* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(red, pink); /* Firefox 3.6 - 15 */
			background: linear-gradient(red, pink); /* 标准的语法 */
		}

		 /* 从左到右的线性渐变： */
		.div3{

			width: 200px;
			height: 200px;
			background: -webkit-linear-gradient(left, red , pink); /* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(right, red, pink); /* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(right, red, pink); /* Firefox 3.6 - 15 */
			background: linear-gradient(to right, red , pink); /* 标准的语法 */
		}

		 /*从左上角到右下角的线性渐变： */

		.div4{
			width: 200px;
			height: 200px;
			background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
			background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
		}

		 /*使用角度的线性渐变： */

		.div5{
			width: 200px;
			height: 200px;
			background: -webkit-linear-gradient(30deg, red, blue); /* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(30deg, red, blue); /* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(30deg, red, blue); /* Firefox 3.6 - 15 */
			background: linear-gradient(30deg, red, blue); /* 标准的语法 */
		}
                /* 使用透明度（transparent） */
		.div6{
			width: 200px;
			height: 200px;
			background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
			background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
			background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
			background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
		}

		/* 重复的线性渐变 */
		.div7{
			width: 200px;
			height: 200px;
			 /* Safari 5.1 - 6.0 */
			 background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
			 /* Opera 11.1 - 12.0 */
			 background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
			 /* Firefox 3.6 - 15 */
			 background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
			 /* 标准的语法 */
			 background: repeating-linear-gradient(red, yellow 10%, green 20%);
		}

2.径向渐变(以标准语法为例)

1. 颜色结点均匀分布的径向渐变： background: radial-gradient(red, green, blue); 
2. 颜色结点不均匀分布的径向渐变：background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
   
3. 形状为圆形的径向渐变：shape 参数定义了形状。（circle 或 ellipse。）                                                  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
   
4. 带有不同尺寸大小关键字的径向渐变：（closest-side   farthest-side   closest-corner   farthest-corner） background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
5. 重复的线性渐变：background: repeating-radial-gradient(red, yellow 10%, green 15%);

 /* 颜色结点均匀分布的径向渐变： */
 .div2{

 	width: 200px;
 	height: 200px;
 	background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
 	background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
 	background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
 	background: radial-gradient(red, green, blue); /* 标准的语法 */ 	
 }

 /* 颜色结点不均匀分布的径向渐变：*/
 .div3{

 	width: 200px;
 	height: 200px;
 	background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
 	background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
 	background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
 	background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
 	
 }

 /*形状为圆形的径向渐变：shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。 */

 .div4{
 	width: 200px;
 	height: 200px;
 	
 	background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
 	background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
 	background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
 	background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
 }

		 /*带有不同尺寸大小关键字的径向渐变：closest-side
farthest-side
closest-corner
farthest-corner*/

.div5{
	width: 200px;
	height: 200px;
	/* Safari 5.1 - 6.0 */
	background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
	/* Opera 11.6 - 12.0 */
	background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
	/* Firefox 3.6 - 15 */
	background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
	/* 标准的语法 */
	background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
	
}

/* 重复的线性渐变 */
.div7{
	width: 200px;
	height: 200px;
	/* Safari 5.1 - 6.0 */
	background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
	/* Opera 11.6 - 12.0 */
	background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
	/* Firefox 3.6 - 15 */
	background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
	/* 标准的语法 */
	background: repeating-radial-gradient(red, yellow 10%, green 15%);
	
}