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

考慮到瀏覽器兼容性，線性漸變包含帶有內核和不帶內核的兩種寫法，也就導致了語法的多樣性，下面會對不同語法進行一個總結。

不同瀏覽器有不同內核，針對不同瀏覽器設置一些樣式的時候，我們需要加上其對應內核。在最后可以加上通用的寫法。
火狐：moz
谷歌，safari： webkit
opera：op
ie：ms

1 首先我們看看帶有內核的語法，這里以webkit為例，其它的內核都是一樣的語法。

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

帶內核代碼：

.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%);   */             
}

三種效果圖分別如下：

對比圖.png

2 線性漸變的通用寫法（不帶內核的線性漸變）

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

不帶內核代碼

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

兩種效果圖對比如下：

對比圖2.png