css3 渐变

渐变分为：线性渐变，径向渐变。

css3 渐变： IE10+，chrome26+（10.0 加上-webkit-）,firefox16+(3.6 -moz-),safari6.1+(5.1 -webkit-),opera12.1+(11.6 -o-)

 

线性渐变 linear gradients

语法：linear-gradient(direction,color-stop1,color-stop2,...);

线性渐变默认direction 是从上到下。

因此方向为从上到下：linear-gradient(color-stop1,color-stop2,...);

	<style type="text/css">
		div{
			width: 800px;
			height: 500px;
			background: -webkit-linear-gradient(red,blue);
			background:    -moz-linear-gradient(red,blue);
			background:      -o-linear-gradient(red,blue);
			background:         linear-gradient(red,blue);
		}
	</style>

从左到右：

            background: -webkit-linear-gradient(begin-direction,red,blue);
            background:    -moz-linear-gradient(end-direction,red,blue);
            background:      -o-linear-gradient(end-direction,red,blue);
            background:         linear-gradient(to end-direction,red,blue);

		.div2{
			width: 800px;
			height: 500px;
			background: -webkit-linear-gradient(left,red,blue);
			background:    -moz-linear-gradient(right,red,blue);
			background:      -o-linear-gradient(right,red,blue);
			background:         linear-gradient(to right,red,blue);
		}

对角渐变

            background: -webkit-linear-gradient(begin-level begin-vertical,red,blue);
            background:    -moz-linear-gradient(end-level end-vertical,red,blue);
            background:      -o-linear-gradient(end-level end-vertical,red,blue);
            background:         linear-gradient(to end-level end-vertical,red,blue);

线性渐变 角度、结点、透明

使用角度的渐变：background：linear-gradient(angle,color-stop1,color-stop2,...)

角度说明：

                   

		.div4{
			width: 800px;
			height: 500px;
			background: -webkit-linear-gradient(45deg,red,white,blue);
			background:    -moz-linear-gradient(45deg,red,white,blue);
			background:      -o-linear-gradient(45deg,red,white,blue);
			background:         linear-gradient(45deg,red,white,blue);
		}

颜色结点 语法 background：linear-gradient(color1 length|percentage,

                                                                       color2 length|percentage,

                                                                        ...)

		.div5{
			width: 800px;
			height: 500px;
			background: -webkit-linear-gradient(45deg,red 20%,orange 35%,yellow 55%,white 60%,green 75%,blue 80%,purple 100%);
			background:    -moz-linear-gradient(45deg,red 20%,orange 35%,yellow 55%,white 60%,green 75%,blue 80%,purple 100%);
			background:      -o-linear-gradient(45deg,red 20%,orange 35%,yellow 55%,white 60%,green 75%,blue 80%,purple 100%);
			background:         linear-gradient(45deg,red 20%,orange 35%,yellow 55%,white 60%,green 75%,blue 80%,purple 100%);
		}

颜色透明度

		.div6{
			width: 800px;
			height: 500px;
			background: -webkit-linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));
			background:    -moz-linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));
			background:      -o-linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));
			background:         linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));
		}

线性渐变 - 重复渐变

语法： background: repeating-linear-gradient(color1 length|percentage,

                                                                          color2 length|percentage,

                                                                           ...)

		.div7{
			width: 800px;
			height: 500px;
			background: -webkit-repeating-linear-gradient(90deg,red 0%, orange 10%, red 20%);
			background:    -moz-repeating-linear-gradient(90deg,red 0%, orange 10%, red 20%);
			background:      -o-repeating-linear-gradient(90deg,red 0%, orange 10%, red 20%);
			background:         repeating-linear-gradient(90deg,red 0%, orange 10%, red 30%);
		}

使用重复渐变，模版信纸：

	body{
            background-image:-webkit-repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px);
            background-image:repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px);
            /*指定背景图片大小*/
            background-size: 100% 30px;
            position: relative;
        }

 

径向渐变

语法： radial-gradient(center,shape size,start-color, ..., end-color)

		div{
			width: 800px;
			height: 500px;
			background: -webkit-radial-gradient(red,blue);
			background:    -moz-radial-gradient(red,blue);
			background:      -o-radial-gradient(red,blue);
			background:         radial-gradient(red,blue);
		}

设置形状

语法： background: radial-gradient(shape,start-color, ..., end-color

shape 可取的值：

  circle —— 圆形

  ellipse —— 椭圆（默认）

尺寸大小（渐变的尺寸）

语法： background: radial-gradient(size,color1,color2 ...,)

size 可取值：

 closest-side  最近边 

 closest-corner 最近角

 farthest_side 最远边

 farthest-corner 最远角

圆心位置

语法：background: radial-gradient(x-percentage y-percentage,color1,color2)

径向渐变重复渐变

语法：background:repeating-radial-gradient(color1 length|percentage,

                                                                        color2 length|percentage,

                                                                         ...)

渐变的一个小例子：

	<style type="text/css">
		.div{
			width: 800px;height: 800px;background: #abcdef;background-size: 100px 100px;
			background-image: -webkit-linear-gradient(45deg,red 25%,transparent 25%),
			                  -webkit-linear-gradient(-45deg,red 25%,transparent 25%),
			                  -webkit-linear-gradient(45deg,transparent 75%,red 75%),
			                  -webkit-linear-gradient(-45deg,transparent 75%,red 75%);
			background-image: -moz-linear-gradient(45deg,red 25%,transparent 25%),
			                  -moz-linear-gradient(-45deg,red 25%,transparent 25%),
			                  -moz-linear-gradient(45deg,transparent 75%,red 75%),
			                  -moz-linear-gradient(-45deg,transparent 75%,red 75%);
			background-image: -o-linear-gradient(45deg,red 25%,transparent 25%),
			                  -o-linear-gradient(-45deg,red 25%,transparent 25%),
			                  -o-linear-gradient(45deg,transparent 75%,red 75%),
			                  -o-linear-gradient(-45deg,transparent 75%,red 75%);
			background-image: linear-gradient(45deg,red 25%,transparent 25%),
			                  linear-gradient(-45deg,red 25%,transparent 25%),
			                  linear-gradient(45deg,transparent 75%,red 75%),
			                  linear-gradient(-45deg,transparent 75%,red 75%);
		}
	</style>