『Reprint』GRADUAL

CSS漸變之CSS3 gradient在Firefox3.6下的使用

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=727

原文地址：http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
原文做者：Alix Franquet
翻譯做者：張鑫旭

1、引子

Firefox3.6包含了許多CSS的改進，本文將向您展現若是使用CSS漸變。

若是你正在運行的Firefox 3.6的最新測試版，你應該看看咱們的互動演示，並查看相應的代碼。使用單選按鈕來切換不一樣的樣式選項。

2、含CSS漸變的背景(backgrounds)

背景使用CSS漸變顯示能夠不使用圖像就實現兩個或兩個以上的指定顏色的平滑過渡。這反過來又減小了下載時間和帶寬的使用，放大時也比較好看，可讓您創造出一個更靈活的佈局。

Firefox支持兩種類型的CSS漸變：線性的(-moz-linear-gradient)和放射狀的(-moz-radial-gradient)。

3、線性漸變(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);}

4、徑向漸變(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);

5、重複漸變(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);}