CSS中的線性漸變linear-gradient怎么用

這篇文章給大家介紹CSS中的線性漸變linear-gradient怎么用，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

在CSS3出現(xiàn)之前，漸變效果只能通過(guò)圖形軟件設(shè)計(jì)圖片來(lái)實(shí)現(xiàn)，可拓展性差，還影響性能。如今已經(jīng)進(jìn)入CSS3標(biāo)準(zhǔn)的漸變可以很輕松的完成漸變效果。漸變實(shí)際上分為線性漸變和徑向漸變兩種，本文介紹線性漸變。

定義　　

漸變實(shí)際上是兩種或多種顏色之間的平滑過(guò)渡。而線性漸變是多種顏色沿著一條直線(稱為漸變線)過(guò)渡。漸變的實(shí)現(xiàn)由兩部分組成：漸變線和色標(biāo)。漸變線用來(lái)控制發(fā)生漸變的方向；色標(biāo)包含一個(gè)顏色值和一個(gè)位置，用來(lái)控制漸變的顏色變化。瀏覽器從每個(gè)色標(biāo)的顏色淡出到下一個(gè)，以創(chuàng)建平滑的漸變，通過(guò)確定多個(gè)色標(biāo)可以制作多色漸變效果。

[注意]safari4-5、IOS3.2-4.3、android2.1-3只支持線性漸變，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支持線性和徑向漸變，且需要添加-webkit-；IE10+及其他高版本瀏覽器支持標(biāo)準(zhǔn)寫法

CSS Code復(fù)制內(nèi)容到剪貼板

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)   
<side-or-corner> = [left | rightright] || [top | bottombottom]

漸變線　　
漸變線從漸變框中心向兩個(gè)方向進(jìn)行拓展，起點(diǎn)和終點(diǎn)是漸變線與經(jīng)過(guò)漸變框的一個(gè)角的垂直線的相交點(diǎn)

漸變的第一個(gè)參數(shù)用于指定漸變線，默認(rèn)是to bottom。有兩種方式指定漸變線方向

【1】使用角度

0deg表示沿著元素的中心線由下向上的方向(類似于y軸)，且正角度表示順時(shí)針旋轉(zhuǎn)

[注意]對(duì)于-webkit-舊版本瀏覽器，如windows系統(tǒng)下的safari瀏覽器來(lái)說(shuō)，0deg表示沿著元素中心線從左向右的方向(類似于x軸),且正角度表示逆時(shí)針旋轉(zhuǎn)

所以-webkit-舊版本瀏覽器與標(biāo)準(zhǔn)瀏覽器的之間線性漸變的角度關(guān)系為

-webkit-瀏覽器 = 90deg - 標(biāo)準(zhǔn)瀏覽器

相當(dāng)于-webkit-linear-gradient(90deg,red,blue) = linear-gradient(0deg,red,blue)

[注意]對(duì)于webkit內(nèi)核的瀏覽器來(lái)說(shuō)，使用javascript改變?cè)氐臉邮?。?dāng)帶-webkit-的私有樣式和不帶-webkit-的標(biāo)準(zhǔn)樣式同時(shí)存在的時(shí)候，并不一定是后面覆蓋前面。所以如果兩種寫法產(chǎn)生的效果相同，但參數(shù)不同時(shí)，要使用瀏覽器識(shí)別來(lái)分別寫不同的情況。

【2】使用關(guān)鍵字

CSS Code復(fù)制內(nèi)容到剪貼板

1. to top -> 0deg   
   to rightright -> 90deg   
   to bottombottom -> 180deg   
   to left -> -90deg(或270deg)   
   to top left -> -45deg(或315deg)   
   to top rightright -> 45deg   
   to bottombottom left -> -135deg(或225deg)   
   to bottombottom rightright -> 135deg

[注意]window系統(tǒng)的safari瀏覽器并不支持'to'加方向的關(guān)鍵字，如to left。它只支持方向關(guān)鍵字，如left。當(dāng)然了left 和 to left 方向是正好相反的

色標(biāo)　　
瀏覽器對(duì)于色標(biāo)并沒(méi)有默認(rèn)值，且必須設(shè)置至少兩個(gè)色標(biāo)。色標(biāo)由顏色和位置組成。顏色使用任何一種顏色模式都可以，而位置可以使用百分比或數(shù)值。

[注意]顏色的位置也可以設(shè)置負(fù)值

【1】必須是顏色在前，位置在后

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. //正確   

2. background-image: linear-gradient(red 0%,blue 100%);   

3. //錯(cuò)誤   

4. background-image: linear-gradient(0% red,100% blue);  

【2】位置可以省略，瀏覽器默認(rèn)會(huì)把第一個(gè)顏色的位置設(shè)置為0%，把最后一個(gè)顏色的位置設(shè)置為100%

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. background-image: linear-gradient(red 0%,blue 100%);   

2. //等價(jià)于上一個(gè)   

3. background-image: linear-gradient(red,blue);  

【3】若漸變只有兩種顏色，且第一個(gè)顏色的位置設(shè)置為n%，第二個(gè)顏色的位置設(shè)置為m%。則瀏覽器會(huì)將0%-n%的范圍設(shè)置為第一個(gè)顏色的純色，n%-m%的范圍設(shè)置為第一個(gè)顏色到第二個(gè)顏色的過(guò)渡，m%-100%的范圍設(shè)置為第二個(gè)顏色的純色

CSS Code復(fù)制內(nèi)容到剪貼板

1. background-image: linear-gradient(red 30%,blue 60%);   

2. //等價(jià)于上一個(gè)   

3. background-image: linear-gradient(red 0%,red 30%,blue 60%,blue 100%);  

【4】若漸變顏色沒(méi)有指定位置，則它們會(huì)均勻分布

CSS Code復(fù)制內(nèi)容到剪貼板

1. background-image: linear-gradient(red,yellow,green,blue);  

【5】若多色占據(jù)同一個(gè)位置，例a、b、c三色均占據(jù)n%這一位置，則0%-n%為前一種顏色與a顏色的顏色漸變；然后是n%-n%的a顏色與c顏色的顏色突變；n%-100%是c顏色與后一種顏色的顏色漸變。因此，中間的b是無(wú)用的

CSS Code復(fù)制內(nèi)容到剪貼板

1. background-image: linear-gradient(red,yellow 50%,white 50%,black 50%,blue);   

2. //等價(jià)于上一個(gè)   

3. background-image: linear-gradient(red,yellow 50%,black 50%,blue);  

重復(fù)漸變　　
重復(fù)漸變可以實(shí)現(xiàn)線性漸變的重復(fù)效果，使色標(biāo)在漸變線方向上無(wú)限重復(fù)，實(shí)現(xiàn)一些特殊的效果
[注意]只有當(dāng)首尾兩顏色位置不在0%或100%時(shí)，重復(fù)漸變才生效

CSS Code復(fù)制內(nèi)容到剪貼板

1. background-image: -webkit-repeating-linear-gradient(blue 20%,green 50%);   

2. background-image: repeating-linear-gradient(blue 20%,green 50%);  

紙張效果

使用重復(fù)漸變可以實(shí)現(xiàn)橫線紙張效果　　

CSS Code復(fù)制內(nèi)容到剪貼板

1. div{   
       height: 200px;   
       width:200px;   
       font: 14px/20px '宋體';   
       text-indent: 2em;   
       background-image: -webkit-repeating-linear-gradient(#f9f9f9,#f9f9f9 9%,#ccc 10%);   
       background-image: repeating-linear-gradient(#f9f9f9,#f9f9f9 9%,#ccc 10%);   
   }

 多背景

使用多背景屬性，利用帶有透明度的漸變顏色給圖片添加漸變的透明效果

CSS Code復(fù)制內(nèi)容到剪貼板

1. background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8)),url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif');  

應(yīng)用場(chǎng)景　　

在CSS樣式中，漸變相當(dāng)于背景圖片，在理論上可在任何使用url()值的地方采用。比如最常見的background-image、list-style-image以及border-image。但目前為止，僅在背景圖片中得到完美的支持

【1】background-image

CSS Code復(fù)制內(nèi)容到剪貼板

1. background-image: -webkit-linear-gradient(pink,lightblue,lightgreen);   

2. background-image: linear-gradient(pink,lightblue,lightgreen);  

[注意]漸變框的大小由background-size決定，默認(rèn)是padding box

【2】list-style-image

CSS Code復(fù)制內(nèi)容到剪貼板

1. list-style-image: -webkit-linear-gradient(red,blue);   

2. list-style-image: linear-gradient(red,blue);   

3. font-size: 50px;  

[注意]漸變框的大小由font-size決定，默認(rèn)是1em

[注意]firefox不支持在list-style-image中設(shè)置

• 我是文字

【3】border-image

CSS Code復(fù)制內(nèi)容到剪貼板

1. -webkit-border-image:  -webkit-linear-gradient(black,green) 1/10px;       

2. border-image:  linear-gradient(black,green) 1/10px;  

[注意]漸變框的大小由borer-width決定，safari瀏覽器始終實(shí)現(xiàn)的都是帶有fill參數(shù)的表現(xiàn)

IE兼容　　

IE9-瀏覽器并不支持該屬性，但可以使用IE準(zhǔn)專有的濾鏡語(yǔ)法來(lái)實(shí)現(xiàn)兼容


CSS Code復(fù)制內(nèi)容到剪貼板

1. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#color', endColorstr='#color');GradientType代表漸變線方向，0為垂直(默認(rèn))，1為水平   

2. #color代表色標(biāo)，格式是#aarrggbb，其中aa為透明度，rrggbb為rgb模式的顏色   

3. 
   

4. startColorstr的默認(rèn)值是#ff0000ff    

5. endColorstr的默認(rèn)值是#ff000000  

[注意]由于IE濾鏡只支持首尾兩個(gè)位置，且方向只可以為垂直和水平，所以有很大的局限性

CSS Code復(fù)制內(nèi)容到剪貼板

1. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff0000ff', endColorstr='#ffff00ff');  

關(guān)于CSS中的線性漸變linear-gradient怎么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。