css3新增Gradient屬性，用來增加漸變的效果，漸變分為線性漸變 linear-grident 和 徑向漸變 radial-grident，這篇文章主要介紹線性漸變linear-grident 。

linear-grident語法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

1. direction表示漸變方向，取值有 to top, to bottom, to left, to right, to top left, to top right, to bottom left, to bottom right等，分別表示從下到上，從上到下，從左到右。。。等等

除了可以用top,bottom表示方向外，還可以用角度來表示。

若沒有角度，只有顏色的漸變時，默認從上到下漸變，如下所示：

background: linear-gradient(red,orange,yellow,green,blue,indigo,violet);

效果如下：

加上角度時，0deg表示從下到上，90deg表示從左到右，按照順時針的方式，以此類推，如下圖所示：

linear-grident需要根據不同的瀏覽器加上瀏覽器前綴，一般我們在加瀏覽器前綴時直接加即可，比如-webkit，-moz，-o等，

但是linear-grident不能直接在前面加瀏覽器前綴，因為很多瀏覽器(Chrome,Safari,fiefox等)使用了舊的標準，

即 0deg 將創建一個從左到右的漸變，90deg 將創建一個從下到上的漸變。換算公式 90 - x = y其中 x 為標準角度，y為非標準角度。

下面是我列出的標準寫法與各瀏覽器的區別：

-moz和-o等和-webkit前綴一樣，在這裏就不列出了。

所以在加瀏覽器前綴時一定要匹配好樣式，一不小心就會出錯哦

2. color-step1 表示漸變的起始顏色，color-step2表示終止的漸變顏色，當然顏色可以有很多，不限於兩個，如下所示：

background-image:linear-gradient(to left, #32c7b1,#89f389,yellow);   //  表示從右到左漸變顏色分別為#32c7b1 #89f389 yellow

效果如下：

顏色後面還可以加參數，比如20%，50%，也可以寫固定的大小，比如20px，50px，百分比或固定大小是指某個顏色值距離起點的開始位置 。

默認的漸變方式為從上往下，所以當某個顏色值設置了百分比後，便會從距離頂端相關的距離（百分比計算）開始填充實色。而漸變色會在頂部與尾部的中間填充。

比如在不設置百分比時：

background-image:linear-gradient(to bottom,red,yellow);  

上圖看不出默認百分比是多少，再加上如下百分比試試：

background-image:linear-gradient(to bottom,red 0%,yellow 100%); 

效果如圖：

可以看出該圖和上圖是一樣的，所以如果我們不設置百分比的話，默認是根據顏色的個數來給每個顏色值設置的，

最後一個顏色的百分比值就是100%，而起始的值就是0%，中間如果再有多個顏色值，則根據100/（個數-1）平均下去。

示例代碼：

.demo{
    background-image:linear-gradient(red,orange,yellow,green,blue,indigo,violet);          
}
.demo1{
    background-image:linear-gradient(red,orange 16.67%,yellow 33.33%,green 50%,blue 66.67%,indigo 83.33%,violet 100%);           
}

可以看出這兩句代碼的效果是一樣的

下面看看百分比是如何工作的：

當百分比都設置為0時：

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

可以看出上圖中並沒有漸變的效果，也就是說橘色從0%的位置開始渲染實體顏色，把紅色給覆蓋掉了

當後面顏色設置百分比時：

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

可以看出橘色從距離頂端20%的位置開始渲染

再設置為一個50%的

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

紅色從頂端開始渲染，而橘色是從50%的位置開始渲染實體顏色，在50%之前的位置是漸變的顏色

當第一個顏色也加上百分比時：

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

與前一張截圖對比發現，前20%的位置都是紅色的實體顏色，在50%以後都是橘色的實體顏色，只有在20%—50%之間才是漸變色

類似的，再換個百分比：

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

可以看出前50%是紅色的實體顏色，80%以後是橘色的實體顏色，50%—80%之間是紅色到橘色的漸變顏色

由此可以得出結論：漸變過渡區的占比為總的空間（高度或寬度）減去上下兩個著色塊空間占比剩下的空間。

那麽，如果前面的顏色百分比大於後面顏色的百分比呢？

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

可以看出紅色和橘色都是50%，且沒有過渡區。

下面摘抄於原文：如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小，則該色標的位置值會被設置為它前面所有色標位置值的最大值。

也就是說橘色雖然被設置為40%，但是和前面的紅色位置一樣都是50%，此時前50%是紅色的實體顏色，後50%是橘色的實體顏色，便沒有了過渡區。

3. 漸變重復的效果 repeating-linear-gradient()

background-image:repeating-linear-gradient(red 10%,orange 20%); 

重復漸變的屬性在各個瀏覽器下的語法是一樣的，直接在前面加上瀏覽器前綴即可，這個就不用擔心啦

4. 如果想做出重復的線條式的背景，可以加上background-size屬性，如下所示：

.demo{
    background-image: linear-gradient(90deg,orange 50%,red 50%);    
    background-size: 53px;         
}

效果如圖：

如果想做出隨機線條的背景，便可以多寫幾個重復的線條，然後疊加起來，如下所示：

.demo{
    width: 400px;
    height: 300px;
    background-color: #026873;
    background-image:   linear-gradient(90deg,rgba(255,255,255,.07) 50%, transparent 50%),
                        linear-gradient(90deg,rgba(255,255,255,.17) 50%, transparent 50%),
                        linear-gradient(90deg,rgba(255,255,255,.13) 50%, transparent 50%),
                        linear-gradient(90deg,rgba(255,255,255,.19) 50%, transparent 50%);    
    margin: 40px; 
    background-size: 13px,29px,37px,53px;         
}    

效果如下所示：

參考鏈接：http://www.jianshu.com/p/bf862535dd30
http://www.zhangxinxu.com/wordpress/2017/02/cicada-principle-css3-randomisation-multiple-backgrounds-border-radius/

linear-grident的屬性和使用以及對顏色後面參數(百分比)的理解