CSS3如何實現(xiàn)線性漸變用法

這篇“CSS3如何實現(xiàn)線性漸變用法”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“CSS3如何實現(xiàn)線性漸變用法”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細步驟清晰，細節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

平房網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)自2013年起到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

前言

演示下太老版本瀏覽器的漸變實現(xiàn)了[IE9-];
IE9以前,漸變都是通過濾鏡實現(xiàn)的,大體的寫法就是這樣;

.testDiv {
		width:400px;
		height:400px;
		border:1px solid #f00;
		/*
		IE濾鏡寫法;
		gradientType : 1代表水平方向 , 0 代表垂直線性漸變 ;
		startColorstr是起始顏色,endColorstr是結(jié)束顏色;
		顏色支持十六進制的寫法或者英文單詞
		當(dāng)然也支持透明度[十六進制]

		#AAFF0000[AA是透明度(00是完全透明,FF是完全不透明)],后六位是標(biāo)準的十六進制顏色寫法;
		 */
		
		/*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);
	    

	}

效果圖就是這樣: 水平漸變且顏色比較淡,設(shè)置了透明

CSS3如何實現(xiàn)線性漸變用法

CSS3線性漸變兼容性

CSS3如何實現(xiàn)線性漸變用法

標(biāo)準語法(包含兩個參數(shù),第一個參數(shù)可以是角度或者英文方向,第二個是漸變起始,可以多個顏色值!)

gradient : ([方向或者角度] , 起始值顏色)
firefox/chrome/ms/opera 四者的寫法已經(jīng)標(biāo)準化,較前一些版本需要帶前綴
firefox(-moz-)/chrome(-webkit-)/microsoft(-ms)/opera(-o-) [四種前綴對應(yīng)四種解析引擎,我那樣寫只是曾經(jīng)的代表瀏覽器,…比如現(xiàn)在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
溫馨提示: 建議用角度比較標(biāo)準化,英文方向的safari有些解析后和其他瀏覽器好像不一樣

效果圖

CSS3如何實現(xiàn)線性漸變用法

CSS3如何實現(xiàn)線性漸變用法

CSS3如何實現(xiàn)線性漸變用法

代碼

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

<head>
    <meta charset="UTF-8">
    <style type="text/css" media="screen">
    div {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        text-align: center;
        line-height: 200px;
        float: left;
        margin: 10px;
    }
    /*
			我這里的類命名都是簡寫:
			u :up,
			d:down,
			l:left,
			r:right,
			b:bottom,
			2: to;
			角度正數(shù)是順時針,負的逆時針;角度是代表到某個角度的時候開始往其他范圍擴散哦;
			以前剛搞的時候也挺懵,其實自己多寫寫就曉得了;
			截止我寫這篇文章,漸變的標(biāo)準規(guī)范更加完善了,許多都不需要帶前綴了;
			而為了兼顧移動端,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如何實現(xiàn)線性漸變用法”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：CSS3如何實現(xiàn)線性漸變用法
鏈接地址：http://muchs.cn/article48/iejsep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、定制網(wǎng)站、商城網(wǎng)站、網(wǎng)站排名、用戶體驗、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)