本文主要内容：
線性漸變概括
線性漸變語法與參數
線性漸變的基本用法
多色線性漸變
1.線性漸變概括
如果有使用過PS的各位想必對PS的漸變操作有所了解，漸變由兩種顔色或多種顔色之間的平滑過渡，如PS中的漸變操作：
在線性漸變的過程中，顔色會沿著任意軸過渡，不管從頂部到底部還是從左到右，甚至某個角度開始，都可以實現。最早支持線性漸變的是以-webkit-爲前綴的瀏覽器，後面才在衆多瀏覽器上普及，但是那時候衆多瀏覽器並沒有統一的標準，用法差異很大，如今，所有的現代瀏覽器都支持W3C給出的線性屬性的標準語法。
2.線性漸變語法與參數
線性漸變的語法較之其它的CSS3語法相對複雜的多，本文以W3C爲標準的語法介紹CSS3的線性漸變。
標準線性漸變語法
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 參數說明： <angle> = [deg] <side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <length> | <percentage> ]?
第一個參數:
指定了漸變的方向，同時決定了漸變顔色的停止位置。這個參數值可以省略，當省略不寫的時候其取值爲“to bottom”。
下述值用來表示漸變的方向，可以使用角度或者關鍵字來設置：
angle：用角度值指定漸變的方向（或角度）。
to left：設置漸變爲從右到左。相當於: 270deg
to right：設置漸變從左到右。相當於: 90deg
to top：設置漸變從下到上。相當於: 0deg
to bottom：設置漸變從上到下。相當於: 180deg。這是默認值，等同於留空不寫。
第二個參數：
color-stop 用於指定漸變的起止顔色。
color：指定顔色。
length：用長度值指定起止色位置。不允許負值
percentage：用百分比指定起止色位置。
3.線性漸變的基本用法
3.1 從底部向頂部漸變
制作從底部到頂部直線漸變最簡單的方法直接使用“to top”關鍵詞。表示第一顔色向第二顔色漸變,下同。實現類似於“to top”效果還可以使用角度值“0deg”、“360deg”和“-360deg”。
.div {
width: 400px;
height: 200px;
border: 1px solid #000;
margin-bottom: 10px;
}
.gradient {
background: linear-gradient(to top,#39f,#fff);
}效果如下：
3.2從右向左漸變
“to left”關鍵詞實現了從右向左顔色漸變，“to left”實現的效果也可以使用角值“-90deg”和“270deg”；
.gradient {
background: linear-gradient(to left,#39f,#fff);
}效果如下：
3.3 從左下角到右上角
“to top right”關鍵詞實現左下角到右上角的線性漸變。也就是第一顔色從左下角向右上角第二顔色漸變。
background: linear-gradient(to top right,#39f,#fff);
效果如下：
3.4 色標
這個例子指定三個色標:
background: linear-gradient(to bottom, blue, white 80%, green);
需要注意的是第一個和最後一個色標並沒有指定一個位置; 由於這個原因， 位置值0％和100%將分別自動的分配給第一個和最後一個色標 。中間的色標指定一個80%的位置, 把剩下的部分留給底部。
效果如下：
4.多色線性漸變
前面向大家演示的效果僅是一些簡單的線性漸變（兩色漸變），其實在實際中，漸變不僅僅是只有兩種顔色，會有多色。接下來，我們一起來看一個從右向左的五彩漸變。
background:-webkit-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background:linear-gradient(right, red, orange, yellow, green, blue, indigo, violet);
由代碼可知，我們只要設置好了漸變位置，剩下的就可以隨意設置顔色了。
效果如下：
小結
在本篇文章的案例中，效果的位置並不是一成不變的，可以在angle中設置看到更多的漸變效果。同時在實際開發中，爲了避免遇到的兼容問題，大家在開發中最好加上内核前綴避免兼容問題。
