欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3 渐变

程序员文章站 2024-01-24 23:53:22
...

渐变分为:线性渐变,径向渐变。

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,...)

角度说明:

                   css3 渐变

		.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,

                                                                         ...)

渐变的一个小例子:

css3 渐变

	<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>