background 線性漸變

格式：

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

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner>] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

取值：
下述值用來表示漸變的方向，能夠使用角度或者關鍵字來設置：
<angle>：順時針方向角度
用角度值指定漸變的方向（或角度）。
to left：
設置漸變爲從右到左。至關於: 270deg
to right：
設置漸變從左到右。至關於: 90deg
to top：
設置漸變從下到上。至關於: 0deg
to bottom：
設置漸變從上到下。至關於: 180deg。這是默認值，等同於留空不寫。
<color-stop> 用於指定漸變的起止顏色：
<color>：
指定顏色。
<length>：
用長度值指定起止色位置。不容許負值不是指顏色的長度
<percentage>：
用百分比指定起止色位置。

兩個相鄰的color-stop之間的關係爲：前者的起始位置與後者起始位置的差之間爲兩個顏色的 漸變過分距離，若後者位置與前者位置交叉則起始位置爲前者結束位置，則無漸變過分，造成 條紋樣式。
若是某個色標的位置值比整個列表中在它以前的色標的位置值都要小，則該色標的位置值會被設置爲它前面全部色標位置值的最大值。

可利用background-size來設置背景圖像的大小。linear-gradient生成的圖像也一樣適用。

background-size: length|percentage|cover|contain;

length （20px 30px拉伸圖片）
設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。若是隻設置一個值，則第二個值會被設置爲 "auto"。

percentage （100% 100% 拉伸圖片）
以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。若是隻設置一個值，則第二個值會被設置爲 "auto"。

cover （不拉伸圖片）
把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。背景圖像的某些部分也許沒法顯示在背景定位區域中。

contain （不拉伸圖片）
把圖像圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域。