在CSS中background: -moz-linear-gradient 讓網站背景漸變的屬性，目前火狐3.6以上版本和google瀏覽器支持這個屬性。
background: -moz-linear-gradient(top, #bccfe3 0%, #d2dded 100%); 適合 FF3.6+
background: -webkit- gradient(linear, left top, left bottom, color-stop(0%,#bccfe3), color- stop(100%,#d2dded)); 適合 Chrome,Safari4+
background: -webkit-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 適合Chrome10+,Safari5.1+
background: -o-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 適合Opera 11.10+
background: -ms-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 適合IE10+
background: linear-gradient(top, #bccfe3 0%,#d2dded 100%); 適合W3C
背景使用CSS漸變顯示可以不使用圖像就實現兩個或兩個以上的指定顏色的平滑過渡。這反過來又減少了下載時間和帶寬的使用，放大時也比較好看，可以讓您創造出一個更靈活的布局。
Firefox支持兩種類型的CSS漸變：線性的(-moz-linear-gradient)和放射狀的(-moz-radial-gradient)。
三、線性漸變(Linear Gradients)要創建一個線性漸變，您需要設置一個起點和一個漸變的方向（或角度），並定義起止顏色。
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )起始點(Starting Point)：起 點的工作方式類似於background position。您可以設置水平和垂直位置為百分比，或以像素為單位，或在水平方向上可以使用 left/center/right，在垂直方向上可以使用top/center/bottom。位置起始於左上角。如果你不指定水平或垂直位置，它將默 認為center。
例如，這里是一個線性漸變，開始於center（水平發現）和top（垂直發現），並從藍色到白色。
代碼如下：
.linear_gradient_square { width: 100px; height: 100px; border: 1px solid #333; background: -moz-linear-gradient(top, blue, white);}或者是起始於left（水平方向）和center（垂直方向）
主要部分代碼如下：
background: -moz-linear-gradient(left, blue, white);或者是起始於left（水平方向）和top（垂直方向）
主要部分代碼如下：
background: -moz-linear-gradient(left top, blue, white);角度(Angle)：正如您在上面看到的，如果您不指定一個角度，它會根據起始位置自動定義。如果你想更多的控制漸變的方向，您不妨設置角度試試。
例如，下面的兩個漸變具有相同的起點left center，但是右手邊的有一個20度的角度。
后面一個含有角度的漸變核心代碼如下：
background: -moz-linear-gradient(left 20deg, black, white);當指定的角度，請記住，它是一個由水平線與漸變線產生的的角度，逆時針方向。因此，使用0deg將產生一個左到右橫向梯度，而90度將創建一個從底部到頂部的垂直漸變。
核心代碼如下：
background: -moz-linear-gradient(<angle>, red, white);起止顏色(Color Stops)：除了起始位置和角度，你應該指定起止顏色。起止顏色是沿着漸變線，將會在指定位置（以百分比或長度設定）含有指定顏色的點。色彩的起止數是無限的。如果您使用一個百分比位置，0％代表起點和100％是終點，但區域外的值可以被用來達到預期的效果。
下面是一個簡單的例子，三個起止顏色。因為第一個和最后的顏色並未指定顏色點，他們將顯示為默認的0％和100％。
background: -moz-linear-gradient(top, blue, white 80%, orange);
如果沒有指定位置，顏色會均勻分布。
核心代碼如下：
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);透明度(Transparency)：還支持透明漸變。這是相當有用的，例如，當堆疊多個背景時。這里是兩個背景的結合：一張圖片，一個白色到透明的線性漸變。
核心代碼如下：
.multibackground_transparent { background: -moz- linear- gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://demos.hacks.mozilla.org /openweb/resources/images/patterns/flowers-pattern.jpg);}四、徑向漸變 (Radial Gradients)為徑向漸變的語法非常類似於線性漸變。
-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);除 了您已經在線性漸變中看到的起始位置，方向，和顏色，徑向梯度允許你指定漸變的形狀（圓形或橢圓形）和大小（最近端，最近角，最遠端，最遠角，包含或覆 蓋 (closest-side, closest-corner, farthest-side, farthest- corner, contain or cover)）。
顏色起止(Color stops)：就像用線性漸變，你應該沿着漸變線定義漸變的起止顏色。下面的圓具有相同的起止顏色，但在左邊的為默認的顏色間隔均勻的漸變，而右邊的每種顏色都有特定的位置。
background: -moz-radial-gradient(red, yellow, #1E90FF); background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
形狀(Shape)：在這里你可以看到兩個可能的形狀間的差異，一個圓（左側）和橢圓（右側），兩者都起始於bottom left：
.radial_gradient_circle { background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);} .radial_gradient_ellipse { background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);}
大小(Size)：size的不同選項(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用來定義圓或橢圓大小的點。
示例：橢圓的近邊VS遠角
下面的兩個橢圓有不同的大小。左邊的一個是由從起始點(center)到近邊的距離設定的，而右邊的一個是由從起始點到遠角的的距離決定的。
background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white); background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
示例：圓的近邊VS遠邊
左邊的圓的漸變大小由起始點(center)到近邊的距離決定，而右邊的圓則有起始點到遠邊的距離決定。
background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white); background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);
示例：包含圓
在這里你可以看到左側的默認圈，同一漸變版本，但是被包含的右邊的圓。
background: -moz- radial-gradient(red, yellow, #1E90FF); background: -moz-radial- gradient(contain, red, yellow, #1E90FF);五、重復漸變(Repeating Gradients)
如果您想重復一個漸變，您可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。
在下面的例子，每個實例都指定了四個起止顏色，並無限重復。
.repeating_radial_gradient_example { background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);} .repeating_linear_gradient_example { background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);}