聲明：此文章為轉(zhuǎn)載谦絮，原文作者：Bressanone_w?點(diǎn)擊查看原文
? ? ? ? ? ?如有侵權(quán)24小時(shí)內(nèi)刪除丽柿。聯(lián)系QQ：1522025433
正文
在第二章《背景與邊框》中第五節(jié)《條紋背景》中，談到了css3的新屬性值linear-gradient,但是這里并不是詳細(xì)說(shuō)明這個(gè)新屬性的用法毁渗，這里主要是用它來(lái)完成背景條紋，來(lái)看看原文中的說(shuō)明與演示。
假設(shè)我們有一條基本的垂直線性漸變倒信，顏色從#fb3過(guò)渡到#58a（參見(jiàn)圖2-20）：
background: linear-gradient(#fb3, #58a);?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖2-20 我們的起點(diǎn)
拋除兼容性前綴，linear-gradient最簡(jiǎn)單的聲明就是如上代碼泳梆，接受兩個(gè)顏色值參數(shù)鳖悠，默認(rèn)就是垂直漸變的。再來(lái)看如下原文：
現(xiàn)在优妙，讓我們?cè)囍堰@兩個(gè)色標(biāo)拉近一點(diǎn)（參見(jiàn)圖2-21）：
background: linear-gradient(#fb3 20%, #58a 80%);
圖2-21 漸變現(xiàn)在出現(xiàn)在總高的60% 區(qū)域乘综，剩下的部分顯示為實(shí)色；色標(biāo)的位置用虛線標(biāo)示出來(lái)了
現(xiàn)在可以看到鳞溉，在顏色值后面跟多一個(gè)對(duì)應(yīng)的百分比值瘾带，虛線框中的漸變過(guò)渡被壓縮了。第一個(gè)顏色的實(shí)色占了總高度的20%熟菲，第二個(gè)顏色的實(shí)色也占了總高度的20%看政，而漸變的過(guò)度則占了總高度的60%。當(dāng)看到這里的時(shí)候我很好奇也很疑惑抄罕，為什么代碼中并沒(méi)有設(shè)置一個(gè)60%的值而為什么結(jié)果會(huì)有一個(gè)相同的值允蚣，書(shū)中也沒(méi)有多說(shuō)。說(shuō)到底就是對(duì)這個(gè)屬性的不熟悉呆贿，我翻閱mdn上面的文檔嚷兔，找到了這么一句：
linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40% and finishing red */
從注釋中可以清楚地知道森渐，百分比是指某個(gè)顏色值距離起點(diǎn)的開(kāi)始位置。默認(rèn)的漸變方式為從上往下冒晰，所以當(dāng)某個(gè)顏色值設(shè)置了百分比后同衣，便會(huì)從距離頂端相關(guān)的距離（百分比計(jì)算）開(kāi)始填充實(shí)色。而漸變色會(huì)在頂部與尾部的中間填充壶运。我們可以自己來(lái)驗(yàn)證相關(guān)的例子：
第一個(gè)我沒(méi)有設(shè)置任何的百分比
background:linear-gradient(red,orange);
得到的效果是這樣的：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 未設(shè)置百分比
由于這個(gè)看不出默認(rèn)的百分比是多少耐齐，所以接下來(lái)設(shè)置了
background:linear-gradient(red0%,orange100%? );
結(jié)果發(fā)現(xiàn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?設(shè)置了百分比
效果跟上圖并沒(méi)有區(qū)別，所以如果我們不設(shè)置百分比的話蒋情，默認(rèn)是根據(jù)顏色的個(gè)數(shù)來(lái)給每個(gè)顏色值設(shè)置的埠况，最后一個(gè)顏色的百分比值就是100%，而起始的值就是0%棵癣，中間如果再有多個(gè)顏色值辕翰，則根據(jù)100/（個(gè)數(shù)-1）平均下去。相同的我們可以設(shè)置多個(gè)值例如
background:linear-gradient(red,orange,yellow,green,blue,indigo,violet);
background:linear-gradient(red0%,orange16.67%,yellow33.33%,green50.00%,blue66.67%,indigo83.33%,violet100%? );
上面這兩個(gè)代碼效果都是一致的
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?效果一致
說(shuō)了這么多狈谊，只知道了默認(rèn)值喜命，還不知道到底百分比是怎么工作的呢。那現(xiàn)在就再來(lái)寫(xiě)例子
首先來(lái)定義一個(gè)顏色值全部都為0的
background:linear-gradient(red0%,orange0%? );
得到如下效果
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 百分比全為0
還不能看出是什么原因?qū)е碌牡某耄酉聛?lái)再設(shè)置一個(gè)0%? 20%的
background:linear-gradient(red0%,orange20%? );
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0% 20%
再設(shè)置一個(gè)0%? 50%的
background:linear-gradient(red0%,orange50%? );
0% 50%
由此不難看出渊抄，紅色部分是從頂端就開(kāi)始著色的，而橙色部分是從設(shè)置的距離頂部的百分比位置開(kāi)始著色丧裁，但把橙色設(shè)置為0%的時(shí)候护桦，便會(huì)直接從頂部開(kāi)始著色，就有了橙色完全遮蓋住紅色的效果煎娇，當(dāng)橙色百分比值增加的時(shí)候二庵，相應(yīng)的就會(huì)產(chǎn)生一個(gè)距離，而這個(gè)距離的空間在一開(kāi)始已經(jīng)被紅色著色了缓呛，所以才會(huì)有了后面的效果催享。
ps：如果設(shè)置第一個(gè)顏色的值呢？
我們來(lái)設(shè)置一下第一個(gè)顏色的百分比
background:linear-gradient(red30%,orange50%? );
可以看到紅色部分明顯加深下沉哟绊，這是因?yàn)榧t色被設(shè)置了距離頂部30%的距離才開(kāi)始著色因妙。那為什么前30%也還是紅色呢，我自己覺(jué)得這是因?yàn)樵谧畹讓右呀?jīng)鋪滿了紅色（也就是第一個(gè)顏色值）的著色了
知道了百分比值的作用票髓，再來(lái)看看什么情況下才會(huì)產(chǎn)生漸變的過(guò)度效果：我們已經(jīng)知道攀涵，當(dāng)默認(rèn)不設(shè)置百分比的時(shí)候，是這樣的
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 未設(shè)置百分比
將紅色設(shè)置0%橙色50%后是這樣的
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?紅色0% 橙色50%
我們?cè)龠M(jìn)行修改洽沟，將紅色改為30%橙色70%看看效果
background:linear-gradient(red30%,orange70%? );
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 紅色30% 橙色70%
所以上面的圖中可以仔細(xì)看出以故，過(guò)度也是有個(gè)空間占比的，默認(rèn)（紅色0%裆操，橙色100%）的漸變過(guò)渡占比為
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 默認(rèn)占比
紅色0%橙色50%的漸變過(guò)渡占比為
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?紅色0% 橙色50%占比
紅色30%橙色70%的漸變過(guò)渡占比為
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 紅色30% 橙色70%占比
所得得出結(jié)論怒详，漸變過(guò)渡區(qū)的占比為總的空間（高度或?qū)挾龋p去上下兩個(gè)著色塊空間占比剩下的空間炉媒。
我們可以通過(guò)設(shè)置兩個(gè)占比各為50%的顏色，看看漸變過(guò)渡區(qū)是否還存在
background:linear-gradient(red50%,orange50%? );
此時(shí)因?yàn)榭臻g都被著色給占滿了昆烁，所以漸變的過(guò)度區(qū)也幾乎沒(méi)有空間吊骤，所以看不到任何的過(guò)度效果
PS：如果后一個(gè)顏色的百分比設(shè)置為比前一個(gè)顏色的百分比小呢，又代表什么意思善玫？
下面摘抄自原文
如果某個(gè)色標(biāo)的位置值比整個(gè)列表中在它之前的色標(biāo)的位置值都要小水援，則該色標(biāo)的位置值會(huì)被設(shè)置為它前面所有色標(biāo)位置值的最大值
所以我們可以知道，如果前面有比當(dāng)前的顏色值百分比大的茅郎，會(huì)自動(dòng)將當(dāng)前顏色值的百分比設(shè)置為前面顏色中的最大百分比值，下面的效果我們就可以知道了
background:linear-gradient(red50%,orange40%? ? );
其實(shí)就相當(dāng)于
background:linear-gradient(red50%,orange50%? ? );
根據(jù)上面全部所說(shuō)的或渤，自己簡(jiǎn)簡(jiǎn)單單就能通過(guò)一個(gè)屬性做出一個(gè)多重顏色線條的背景
background:linear-gradient(red0%,red14.3%,orange0,orange28.6%,yellow0,yellow42.9%,green0,green57.2%,blue0,blue71.5%,indigo0,indigo85.8%,violet0,violet100%? ? );
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?多重顏色線條
ps：解釋一下系冗，總共用了7種顏色。第一個(gè)顏色為red薪鹦，此時(shí)整個(gè)背景已經(jīng)由red覆蓋掌敬，在這里為什么顏色都要設(shè)置兩次，這是因?yàn)槊總€(gè)顏色需要一個(gè)起始著色點(diǎn)池磁，然后還需要將兩個(gè)顏色之間的漸變過(guò)渡區(qū)域覆蓋為實(shí)色奔害，消除過(guò)度效果〉叵ǎ可以想象當(dāng)沒(méi)有了實(shí)色的覆蓋华临，最終效果會(huì)是這樣的
background:linear-gradient(red0%,orange16.67%,yellow33.33%,green50%,blue66.67%,indigo83.33%,violet100%? ? );
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?最終效果
