漸變包含兩種：線性漸變和徑向漸變，這里主要對(duì)線性漸變進(jìn)行詳細(xì)的講解，下一篇詳解徑向漸變。

考慮到瀏覽器兼容性，線性漸變包含帶有內(nèi)核和不帶內(nèi)核的兩種寫(xiě)法，也就導(dǎo)致了語(yǔ)法的多樣性，下面會(huì)對(duì)不同語(yǔ)法進(jìn)行一個(gè)總結(jié)。

不同瀏覽器有不同內(nèi)核，針對(duì)不同瀏覽器設(shè)置一些樣式的時(shí)候，我們需要加上其對(duì)應(yīng)內(nèi)核。在最后可以加上通用的寫(xiě)法。
火狐：moz
谷歌，safari： webkit
opera：op
ie：ms

1 首先我們看看帶有內(nèi)核的語(yǔ)法，這里以webkit為例，其它的內(nèi)核都是一樣的語(yǔ)法。

（帶內(nèi)核）線性漸變：
    語(yǔ)法：
      -webkit-linear-gradient(方向,顏色 位置,顏色 位置);
    示例：
      background: -webkit-linear-gradient(90deg,red 40%,yellow 50%,green 80%);  
    參數(shù)解析： 
    其中位置的百分比指的是顏色結(jié)束漸變的位置。
    方向取值：top，bottom left等／0deg（如果不寫(xiě)默認(rèn)為270deg／top），方向前面不要加to。

帶內(nèi)核代碼：

.a{
/*  從0到40%為紅色，40%到50%為紅色到黃色的漸變，50%到80%為黃色到綠色的漸變，80%到100%為綠色  */
       background: -webkit-linear-gradient(90deg,red 40%,yellow 50%,green 80%);                 
/*  background: -webkit-linear-gradient(left bottom,red 40%,yellow 50%,green 80%);   */
/*  background: -webkit-linear-gradient(top,red 40%,yellow 50%,green 80%);   */             
}

三種效果圖分別如下：

對(duì)比圖.png

2 線性漸變的通用寫(xiě)法（不帶內(nèi)核的線性漸變）

（不帶內(nèi)核）線性漸變
    語(yǔ)法：
      -webkit-linear-gradient(方向,顏色 位置,顏色 位置);
    示例：
      background: linear-gradient(to top,white 0%,red 100%);
    參數(shù)解析：
      方向：如果是采用left等英語(yǔ)單詞需要加to，表示到哪里結(jié)束。
        如果采用角度，不需要加to。

不帶內(nèi)核代碼

.b{
/*   background: linear-gradient(300deg,white 0%,red 100%);  */
        background: linear-gradient(to left bottom,white 0%,red 100%);
}

兩種效果圖對(duì)比如下：

對(duì)比圖2.png