CSS3实现线性渐变用法示例代码详解

前言

演示下太老版本浏览器的渐变实现了[IE9-];
IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样;

.testDiv {
		width:400px;
		height:400px;
		border:1px solid #f00;
		
		
		

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

	}

效果图就是这样: 水平渐变且颜色比较淡,设置了透明

本文主要扯下CSS3下原生实现渐变效果的!!![主流的浏览器和移动端浏览器都可以任性使用]

CSS3线性渐变兼容性

标准语法(包含两个参数,第一个参数可以是角度或者英文方向,第二个是渐变起始,可以多个颜色值!)

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有些解析后和其他浏览器好像不一样

效果图

代码

    
    
    div {
 width: 200px;
 height: 200px;
 border: 1px solid #ccc;
 box-sizing: border-box;
 text-align: center;
 line-height: 200px;
 float: left;
 margin: 10px;
    }
    
    
    .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));
    }
    



    自上而下
    自下而上
    自左到右
    自右到左
    右下角到左上角
    左下角到右上角
    右上角到左下角
    左上角到右下角
    四种颜色渐变
    五种颜色渐变
    六种颜色渐变
    其中颜色带透明的渐变

总结

CSS3的出现,让线性渐变不用只依赖PS实现了…前端的小伙伴也能自行做出各种挺炫的渐变效果!!!哈哈哈哈哈~~~

到此这篇关于CSS3实现线性渐变用法示例代码详解的文章就介绍到这了,更多相关css3 线性渐变内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！