首先，讓我們來了解一下“linear-gradient”的基本用法：
說明：用線性漸變創建圖像
語法：
<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>：用百分比指定起止色位置。
其他知識點：
不知你是否注意到“第一個”語法后面的“+”號沒，這些符號（“?”、“+”、“*”）其實用法跟正則表達式很像，如果正則表達式不知道的請看下面正解：
,：代表每個屬性之間的分隔符號。
?：代表“屬性”可以出現零次或一次，也就是可有可無
+：代表“屬性”可以出現一次或多次，但是必須出現一次
*：代表“屬性”可以出現零次或多次。
|：代表可以從多個“屬性”中任選一個。
||：代表“屬性”可以是左邊的一個或是右邊的一個，或是兩個都行
[]：代表里面是“屬性”或“屬性”集合
<>：這個不是正則表達式里面的，但是它代表定義的取值范圍，如上語法的“<angle>”，取值的里面就會附帶說明這個“<angle>”是干嘛的
{1,4}：代表“屬性”最少出現一次，最多出現四次。“1”和“4”都是動態的值，不是固定的，根據描述而定
來看看基本用法實例：
(圖1)
linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);
以上這五句樣式都可以實現（圖1）的漸變效果
再來看看復雜點的普通實例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 div { width: 200px; height: 100px; margin-top: 10px; border: 1px solid #ddd;} 8 .test { background: linear-gradient(#fff, #333);} 9 .test2 { background: linear-gradient(#000, #f00 50%, #090);} 10 .test3 { background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);} 11 .test4 { background: linear-gradient(45deg, #000, #f00 50%, #090);} 12 .test5 { background: linear-gradient(to top right, #000, #f00 50%, #090);} 13 </style> 14 </head> 15 <body> 16 <div class="test"></div> 17 <div class="test2"></div> 18 <div class="test3"></div> 19 <div class="test4"></div> 20 <div class="test5"></div> 21 </body> 22 </html>
效果圖：
再讓我們看看“高能”的用法：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 body{ background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #99958%, transparent 62%), #444; background-size: 16px 48px;} 8 </style> 9 </head> 10 <body> 11 </body> 12 </html>
效果圖：
怎么樣，效果是不是很酷炫？再瞧瞧其他的：
還有更多好看的就不展示了，源自國外大牛：http://lea.verou.me/css3patterns/#chocolate-weave
其中的幾個重要知識點總結：
■Ⅰ.“background”的繪制順序是從后面的開始向前面的繪制的，百說不如一栗：
1 background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;background-size: 25px 25px;
background繪制時是從“linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753”繪制到...頭部的“linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0)”漸變樣式。所以這“點”要注意了。
■Ⅱ.每一個使用“linear-gradient”繪制出來的漸變效果，都可以看作是一張背景圖。因為，這個可以在“background-size”里設置（每個背景圖的大小用逗號“,”區分）。
■Ⅲ.【非常重要】，制作復雜的背景圖並不難，但是你得知道“background-repeat”的原理就是每一張背景圖都按照你設定的“屬性”去繪制。如果你不知道這個原理，甚至沒注意到。那么當你第一次看到這么漂亮的背景效果，想自己動手豐衣足食的時候卻發現，“What is this？”，看看我第一次寫的背景效果。
第一次寫的：
理想樣子：
實際樣式：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 body{ 8 background:linear-gradient(to right, transparent 0%, #F00 0%, #F00 100%, transparent 100%) 25px 25px, 9 linear-gradient(to top,transparent 0%, #0F0 0%, #0F0 50%, transparent 50%), 10 linear-gradient(to right, transparent 0%, #F00 0%, #F00 50%, transparent 50%), 11 linear-gradient(to right, transparent 50%, #0F0 50%, #0F0 100%, transparent 100%); 12 13 background-color:#FFF; 14 background-size:25px 25px, 50px 50px, 50px 50px, 50px 50px; 15 background-repeat:repeat; 16 } 17 </style> 18 </head> 19 <body> 20 </body> 21 </html>
⊙︿⊙ 好桑心，怎么整個網頁紅色的？
其實這其中就是“background-repeat”的原理問題：每個圖片都是x、y復制繪制的“background-repeat:repeat”，所以當“background-size”不是一致的時候，復制繪制的位置也是不一樣的。
知道是這個原因了，改動一下。
正確的樣式：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 body{ 8 background:linear-gradient(135deg, transparent 0%, #F00 0%, #F00 25%, transparent 25%) 25px 25px, 9 linear-gradient(315deg, transparent 0%, #F00 0%, #F00 25%, transparent 25%), 10 linear-gradient(to top,transparent 0%, #0F0 0%, #0F0 50%, transparent 50%), 11 linear-gradient(to right, transparent 0%, #F00 0%, #F00 50%, transparent 50%), 12 linear-gradient(to right, transparent 50%, #0F0 50%, #0F0 100%, transparent 100%); 13 14 background-color:#FFF; 15 background-size:50px 50px; 16 background-repeat:repeat; 17 } 18 </style> 19 </head> 20 <body> 21 </body> 22 </html>
效果圖：
知道原理才是硬道理 ╰(￣▽￣)╮