linear-grident的屬性和使用

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爲非標準角度。

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

	linear-grident	-webkit-linear-grident
0deg	從下到上（to top）	從左到右（left）
90deg	從左到右（to right）	從下到上（bottom）
180deg	從上到下（to bottom）	從右到左（right）
270deg	從右到左（to left）	從上到下（top）

 

 

 

 

-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/