摘要：第一個(gè)顏色的實(shí)色占了總高度的，第二個(gè)顏色的實(shí)色也占了總高度的，而漸變的過度則占了總高度的。默認(rèn)的漸變方式為從上往下，所以當(dāng)某個(gè)顏色值設(shè)置了百分比后，便會(huì)從距離頂端相關(guān)的距離百分比計(jì)算開始填充實(shí)色。而漸變色會(huì)在頂部與尾部的中間填充。

《Css secret》第二章《背景與邊框》 第五節(jié)《條紋背景》

在第二章《背景與邊框》中第五節(jié)《條紋背景》中，談到了css3的新屬性值linear-gradient,但是這里并不是詳細(xì)說明這個(gè)新屬性的用法，這里主要是用它來(lái)完成背景條紋，來(lái)看看原文中的說明與演示。

假設(shè)我們有一條基本的垂直線性漸變，顏色從#fb3 過渡到#58a（參見圖2-20）：
background: linear-gradient(#fb3, #58a);?

拋除兼容性前綴，linear-gradient?最簡(jiǎn)單的聲明就是如上代碼，接受兩個(gè)顏色值參數(shù)，默認(rèn)就是垂直漸變的。再來(lái)看如下原文：

現(xiàn)在，讓我們?cè)囍堰@兩個(gè)色標(biāo)拉近一點(diǎn)（參見圖2-21）：

background: linear-gradient(#fb3 20%, #58a 80%);

現(xiàn)在可以看到，在顏色值后面跟多一個(gè)對(duì)應(yīng)的百分比值，虛線框中的漸變過渡被壓縮了。第一個(gè)顏色的實(shí)色占了總高度的20%，第二個(gè)顏色的實(shí)色也占了總高度的20%，而漸變的過度則占了總高度的60%。當(dāng)看到這里的時(shí)候我很好奇也很疑惑，為什么代碼中并沒有設(shè)置一個(gè)60%的值而為什么結(jié)果會(huì)有一個(gè)相同的值，書中也沒有多說。說到底就是對(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)的開始位置?。默認(rèn)的漸變方式為從上往下，所以當(dāng)某個(gè)顏色值設(shè)置了百分比后，便會(huì)從距離頂端相關(guān)的距離（百分比計(jì)算）開始填充實(shí)色。而漸變色會(huì)在頂部與尾部的中間填充。我們可以自己來(lái)驗(yàn)證相關(guān)的例子：

第一個(gè)我沒有設(shè)置任何的百分比

    background:linear-gradient(
        red,
        orange
    );

得到的效果是這樣的：

由于這個(gè)看不出默認(rèn)的百分比是多少，所以接下來(lái)設(shè)置了

    background:linear-gradient(
        red 0%,
        orange 100%
    );

結(jié)果發(fā)現(xiàn)

效果跟上圖并沒有區(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(
        red 0%,
        orange 16.67%,
        yellow 33.33%,
        green 50.00%,
        blue 66.67%,
        indigo 83.33%,
        violet 100%
    );

上面這兩個(gè)代碼效果都是一致的

說了這么多，只知道了默認(rèn)值，還不知道到底百分比是怎么工作的呢。那現(xiàn)在就再來(lái)寫例子

首先來(lái)定義一個(gè)顏色值全部都為0的

     background:linear-gradient(
        red 0%,
        orange 0%
    );

得到如下效果

還不能看出是什么原因?qū)е碌?，接下?lái)再設(shè)置一個(gè)0% ? 20%的

    background:linear-gradient(
        red 0%,
        orange 20%
    );

再設(shè)置一個(gè)0% ? 50%的

    background:linear-gradient(
        red 0%,
        orange 50%
    );

由此不難看出，紅色部分是從頂端就開始著色的，而橙色部分是從設(shè)置的距離頂部的百分比位置開始著色，但把橙色設(shè)置為0%的時(shí)候，便會(huì)直接從頂部開始著色，就有了橙色完全遮蓋住紅色的效果，當(dāng)橙色百分比值增加的時(shí)候，相應(yīng)的就會(huì)產(chǎn)生一個(gè)距離，而這個(gè)距離的空間在一開始已經(jīng)被紅色著色了，所以才會(huì)有了后面的效果。

ps：如果設(shè)置第一個(gè)顏色的值呢？

我們來(lái)設(shè)置一下第一個(gè)顏色的百分比

    background:linear-gradient(
        red 30%,
        orange 50%
    );

知道了百分比值的作用，再來(lái)看看什么情況下才會(huì)產(chǎn)生漸變的過度效果：我們已經(jīng)知道，當(dāng)默認(rèn)不設(shè)置百分比的時(shí)候，是這樣的

![未設(shè)置百分比](http://upload-images.jianshu....
)
將紅色設(shè)置0% 橙色50%后是這樣的

我們?cè)龠M(jìn)行修改，將紅色改為30% 橙色70%看看效果

    background:linear-gradient(
        red 30%,
        orange 70%
    );

所以上面的圖中可以仔細(xì)看出，過度也是有個(gè)空間占比的，默認(rèn)（紅色0%，橙色100%）的漸變過渡占比為

紅色0% ?橙色50%的漸變過渡占比為

紅色30% 橙色70%的漸變過渡占比為

所得得出結(jié)論，漸變過渡區(qū)的占比為總的空間（高度或?qū)挾龋p去上下兩個(gè)著色塊空間占比剩下的空間。

我們可以通過設(shè)置兩個(gè)占比各為50%的顏色，看看漸變過渡區(qū)是否還存在

    background:linear-gradient(
        red 50%,
        orange 50%
    );

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(
        red 50%,
        orange 40%
    );

其實(shí)就相當(dāng)于

    background:linear-gradient(
        red 50%,
        orange 50%
    );

根據(jù)上面全部所說的，自己簡(jiǎn)簡(jiǎn)單單就能通過一個(gè)屬性做出一個(gè)多重顏色線條的背景

     background:linear-gradient(
        red 0%,
        red 14.3%,
        orange 0,
        orange 28.6%,
        yellow 0,
        yellow 42.9%,
        green 0,
        green 57.2%,
        blue 0,
        blue 71.5%,
        indigo 0,
        indigo 85.8%,
        violet 0,
        violet 100%
    );

ps：解釋一下，總共用了7種顏色。第一個(gè)顏色為red，此時(shí)整個(gè)背景已經(jīng)由red覆蓋，在這里為什么顏色都要設(shè)置兩次，這是因?yàn)槊總€(gè)顏色需要一個(gè)起始著色點(diǎn)，然后還需要將兩個(gè)顏色之間的漸變過渡區(qū)域覆蓋為實(shí)色，消除過度效果?？梢韵胂螽?dāng)沒有了實(shí)色的覆蓋，最終效果會(huì)是這樣的

    background:linear-gradient(
        red 0%,
        orange 16.67%,
        yellow 33.33%,
        green 50%,
        blue 66.67%,
        indigo 83.33%,
        violet 100%
    );