序言

演试下太老版本电脑浏览器的渐变完成了[IE9-];
IE9之前,渐变全是根据ps滤镜完成的,大致的写法就这样;

.testDiv {
		width:401080x;
		height:401080x;
		border:1px solid #f00;
		/*
		IEps滤镜写法;
		gradientType : 1意味着水平方向 , 0 意味着竖直线形渐变 ;
		startColorstr是起止颜色,endColorstr是完毕颜色;
		颜色适用十六进制的写法或是英语单词
		自然也适用清晰度[十六进制]

		#AAFF0000[AA是清晰度(00是彻底全透明,FF是彻底不全透明)],后六位是规范的十六进制颜色写法;
		 */
		/*IE6~7*/

	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
	    /*IE8*/
	    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);

	}

设计效果图就这样: 水准渐变且颜色较为淡,设定了全透明

CSS3实现线性渐变用法示例代码详解 CSS3 线性渐变 CSS  第1张

文中关键扯下CSS3下原生态完成渐变实际效果的!!![流行的电脑浏览器和手机端电脑浏览器都能够骄纵应用]

CSS3线形渐变兼容模式

CSS3实现线性渐变用法示例代码详解 CSS3 线性渐变 CSS  第2张

规范英语的语法(包括2个主要参数,第一个主要参数能够是视角或者英文方位,第二个是渐变起止,能够好几个颜色值!)

gradient : ([方位或是视角] , 起始值颜色)
firefox/chrome/ms/opera 四者的写法早已规范化,较前一些版本号必须带作为前缀
firefox(-moz-)/chrome(-webkit-)/microsoft(-ms)/opera(-o-) [四种作为前缀相匹配四种分析模块,我那般写仅仅以前的意味着电脑浏览器,…例如如今opera都跑去用google的blink模块]

###渐变视角(deg是degree的简称,视角的含意)

由上而下: to top = 0deg || 360deg
由上而下: top bottom = 180deg || -180deg
自左到右: top left = -90deg || 270deg
自右到左: to right = 90deg || -270deg
右下方到左上方: to top left = 315deg || -45deg
左下方到右上方: to top right = -315deg || 45deg
右上方到左下方: to bottom left = 225deg || -135deg
左上方到右下方:to bootom right = 135deg || -225deg
温馨提醒: 提议用视角较为规范化,英语方位的safari一些分析后和别的电脑浏览器仿佛不一样

设计效果图

CSS3实现线性渐变用法示例代码详解 CSS3 线性渐变 CSS  第3张

CSS3实现线性渐变用法示例代码详解 CSS3 线性渐变 CSS  第4张

CSS3实现线性渐变用法示例代码详解 CSS3 线性渐变 CSS  第5张

编码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style type="text/css" media="screen">
    div {
        width: 201080x;
        height: 201080x;
        border: 1px solid #ccc;
        box-sizing: border-box;
        text-align: center;
        line-height: 201080x;
        float: left;
        margin: 10px;
    }
    /*
			我这里的类取名全是缩写:
			u :up,
			d:down,
			l:left,
			r:right,
			b:bottom,
			2: to;
			视角正数是顺时针方向,负的反方向;视角是意味着到某一视角的情况下刚开始往别的范畴外扩散哦;
			之前刚搞的情况下也挺懵,实际上自身多写一篇就晓得了;
			截至我写本文,渐变的技术标准更为健全了,很多都不用带作为前缀了;
			而为了更好地兼具手机端,webkit这类还不可以丢弃

		*/
    .u2d {
        background: -webkit-linear-gradient(180deg, #590BCC, #18CC6C);
        background: linear-gradient(180deg, #590BCC, #18CC6C);
    }
    .d2u {
        background: -webkit-linear-gradient(0deg, #590BCC, #18CC6C);
        background: linear-gradient(0deg, #590BCC, #18CC6C);
    }
    .l2r {
        background: -webkit-linear-gradient(90deg, #590BCC, #18CC6C);
        background: linear-gradient(90deg, #590BCC, #18CC6C);
    }
    .r2l {
        background: -webkit-linear-gradient(-90deg, #590BCC, #18CC6C);
        background: linear-gradient(-90deg, #590BCC, #18CC6C);
    }
    .rb2lu {
        background: -webkit-linear-gradient(-45deg, #590BCC, #18CC6C);
        background: linear-gradient(-45deg, #590BCC, #18CC6C);
    }
    .lb2ru {
        background: -webkit-linear-gradient(45deg, #590BCC, #18CC6C);
        background: linear-gradient(45deg, #590BCC, #18CC6C);
    }
    .ru2lb {
        background: -webkit-linear-gradient(-135deg, #590BCC, #18CC6C);
        background: linear-gradient(-135deg, #590BCC, #18CC6C);
    }
    .lu2rd {
        background: -webkit-linear-gradient(135deg, #590BCC, #18CC6C);
        background: linear-gradient(135deg, #590BCC, #18CC6C);
    }
    .mclg1 {
        background: -webkit-linear-gradient(135deg, #D6C4F0, #F6B5B5,#18CC6C,#1AB25E);
        background: linear-gradient(135deg, #D6C4F0, #F6B5B5,#18CC6C,#1AB25E);
    }
    .mclg2 {
        background: -webkit-linear-gradient(135deg, #1FB4DC ,#18CC6C , #8B1A1A,#677C67,#BED128);
        background: linear-gradient(135deg, #1FB4DC ,#18CC6C , #8B1A1A,#677C67,#BED128);
    }
    .mclg3 {
        background: webkit-linear-gradient(135deg, #590BCC, #18CC6C,#B5D821,#22CB33,#BA8787,#050201);
        background: linear-gradient(135deg, #590BCC, #18CC6C,#B5D821,#22CB33,#BA8787,#050201);
    }
    .mclg4 {
        background: -webkit-linear-gradient(-135deg, rgba(20,20,20,.9) ,rgba(50,50,50,.6),rgba(60,125,70,.7), rgba(150,150,150,.8),rgba(200,200,200,.9),rgba(80,125,6,.75),rgba(175,75,75,.5));
        background: linear-gradient(-135deg, rgba(20,20,20,.9) ,rgba(50,50,50,.6),rgba(60,125,70,.7), rgba(150,150,150,.8),rgba(200,200,200,.9),rgba(80,125,6,.75),rgba(175,75,75,.5));
    }
    </style>
</head>

<body>
    <div class="u2d">由上而下</div>
    <div class="d2u">由上而下</div>
    <div class="l2r">自左到右</div>
    <div class="r2l">自右到左</div>
    <div class="rb2lu">右下方到左上方</div>
    <div class="lb2ru">左下方到右上方</div>
    <div class="ru2lb">右上方到左下方</div>
    <div class="lu2rd">左上方到右下方</div>
    <div class="mclg1">四种颜色渐变</div>
    <div class="mclg2">五种颜色渐变</div>
    <div class="mclg3">六种颜色渐变</div>
    <div class="mclg4">在其中颜色带全透明的渐变</div>
</body>

</html>

小结

CSS3的出現,让线形渐变无需只依靠PS完成了…前端开发的小伙伴们也可以自主作出各种各样挺炫的渐变实际效果!!!啊哈哈哈~~~

到此这篇有关CSS3完成线形渐变使用方法实例编码详细说明的文章内容就详细介绍到这了,大量有关css3 线形渐变內容请搜索之前的文章内容或再次访问下边的类似文章,期待大伙儿之后多多的适用!