線性漸變linear-gradient的表達(dá)式：
linear-gradient( [<angle> | <side-or-corner>,]? <color-stop> [, <color-stop>]+);
看到線性漸變的表達(dá)式，又要開始用腦了，分拆開來其實很好理解。
先從幾個實際的表達(dá)式講起：
background-image:linear-gradient(#62C292 0%,#F8CBAD 100%);
background-image:linear-gradient(0deg,#62C292 0%,#F8CBAD 100%);
background-image:linear-gradient(top,#62C292 0px,#F8CBAD 100px);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 50%,#62C292 100%);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 25%,#62C292 50%,#F8CBAD 75%,#62C292 100%);
按上面來理解——
background-image:linear-gradient([角度或邊角,]x(0or1)+(顏色+空格+長度或百分比)+[(,顏色+空格+長度或百分比)xn(n>=1)]);
- [角度或邊角,]*(0or1)
指
[<angle>|<side-or-corner>,]? - (顏色+空格+長度或百分比)
指
<color-stop> - [(,顏色+空格+長度或百分比)*n(n>=1)]
指
[, <color-stop>]+ - 我給出的表達(dá)式里頭的“+”理解成字符串之間的合并就可以了
不知道有沒有將大家繞暈，從一開始我就是這樣理解的。換一種簡單暴力點的——
- “|”指“或（即or）”
- “?”指“0或1”
- “+”指“1個以上”
還是從實際案例中來深入理解，下面的測試結(jié)果都是基于firefox38.0
一、認(rèn)識線性漸變的角度
HTML中的body部分——
<div style='width:100px;border:4px solid #3B9768;margin:10px'>
<p style='margin:5px;font-size:12px;text-align:center;'>0deg</p>
<div style='height:90px;margin:5px;background-color:transparent;background-image:linear-gradient(0deg,#62C292 0%,#F8CBAD 100%);'></div>
</div>
依次將里頭的“0deg”替換成“45deg”、“90deg”、“135deg”、“180deg”。
結(jié)果為——
線性漸變中的角度默認(rèn)是從下到上的垂直方向開始順時針進(jìn)行旋轉(zhuǎn)的。
二、兩個以上的漸變顏色和擾人的<color-stop>
先看一個多個漸變顏色的實例。
上圖是從左到右的水平漸變方向，知道了漸變的總長度和起始點，就能一一確定<color-stop>的位置（由長度或百分比來決定），結(jié)合對應(yīng)位置上的顏色就可以知道上一個<color-stop>和下一個<color-stop>是如何發(fā)生顏色漸變的了。
水平和垂直方向的總長度直觀上很好理解，無疑是區(qū)塊背景的寬度或者是高度。如果是非水平和垂直的漸變角度，該如何確定漸變的總長度呢？通過下圖來理解。
如圖所示，漸變的起點和終點在過中心的漸變線的垂直線上，給出一個區(qū)塊和漸變方向，就能夠確定漸變的起始點和總長度了，這樣有n個<color-stop>，就可以劃分n-1個漸變區(qū)域了。
實例：
HTML中的body部分——
<div style='width:350px;height:220px;margin:5px;background-color:transparent;background-image:linear-gradient(135deg, #9DC3E6 0%, #F4B183 25%, #C9C9C9 50%, #FFD966 75%, #A9D18E 100%);'></div>
三、總結(jié)
其實linear-gradient并不坑，理解了原理分分鐘玩轉(zhuǎn)漸變。
