今天出去吃飯，飯后搞活動送了個小禮品。禮品本身不值一提，重要的的是漸變。本篇就介紹并實際做一下這個漸變效果。

線性漸變

W3C標準語法：linear-gradient(angle, color… color);。第一個參數指明漸變方向，0deg表示漸變從下往上，90deg表示漸變從左往右，180deg表示漸變從上往下，270deg表示漸變從右往左。其實就是順時針走一圈。你也可以用to + 關鍵字，例如to top等于0deg，to right等于90deg，to bottom等于180deg，to left等于270deg。第二參數是起始顏色，中間可以指定多個顏色，依次漸變，最后一個參數是終止顏色。權威請參照W3C

先看簡單的，就2個顏色，從白到黑漸變。圖1代碼linear-gradient(0deg, #fff, #000);或linear-gradient(to top, #fff, #000);，代碼根據表題依次類推，一圖勝千言

新版瀏覽器用W3C的標準語法沒問題，但低版本可能尚不支持W3C的標準語法，此時你需要使用各瀏覽器私有的語法。當然如果你的頁面不準備繼續支持這些低版本的瀏覽器的話，此段可以略過。

Webkit引擎（Chrome和Safari），Genko引擎（Firefox），Presto引擎（Opera），Trident引擎（IE）的私有語法和和W3C的標準語法非常像。區別如下：

1. 需要加上前綴，分別是-webkit-，-moz-，-ms-
2. -webkit-，-ms-的第一個參數的關鍵字表示起始位置，因此不需要加to。例如-webkit-linear-gradient(top, #fff, #000);等價于W3C標準語法的linear-gradient(to bottom, #fff, #000);
3. -moz-的第一個參數的關鍵字可以可不加to。不加to表示起始位置，加to表示終止位置。例如-moz-linear-gradient(top, #fff, #000);等價于-moz-linear-gradient(to bottom, #fff, #000);
4. IE10以下是不支持漸變的…因此沒有私有語法
5. Opera從37開始支持，試了下并沒有私有語法，加上-o-前綴反而不認…

另外Webkit引擎（Chrome和Safari）的舊版本還支持一種更舊的私有語法，即舊版本的Webkit引擎的瀏覽器有兩種私有語法。舊語法：-webkit-gradient(type, point, point, color, color)。第一個參數type指明linear線性漸變或radial徑向漸變。第二三參數分別是漸變的起點坐標和終點坐標。第四五參數是color-stop函數來表示起始和終止顏色。color-stop()支持兩個參數，第一個是點的位置，第二個是顏色，例如color-stop(0.5, #fff)表示在漸變范圍的中心處有個黑色的過渡色。具體你可以參照這里

為縮減篇幅，下面仍以介紹W3C標準語法為主。

上面的例子是2個顏色漸變，現在試試指定多個顏色間依次漸變。例如linear-gradient(to bottom, yellow, #9C117A, #EF137A, #f00);

不在位置范圍內的顏色表示不漸變，會填充為實色。例如：

background-image:linear-gradient(to bottom, #fb3 20%, #58a 80%);

漸變區域只集中在中間20-80%區域。上部20%是#fb3的實色，下部20%是#58a的實色。即上下各20%的區域都是實色，不漸變。因此如果你將兩個顏色的位置值均設為50%，就出現了完全沒有漸變效果，全部實色的背景：

background-image:linear-gradient(to bottom, #fb3 50%, #58a 50%);

另外，標準規定：如果顏色的位置值比在它之前的所有顏色的位置值都小，那該顏色的位置值會被調整為它前面所有顏色位置值的最大值。因此上面代碼可以把第二個色標位置值設為0：

background-image:linear-gradient(to bottom, #fb3 50%, #58a 50%);
//等價于
background-image:linear-gradient(to bottom, #fb3 50%, #58a 0);

用實色這個特點很容易實現常見的條紋狀的背景效果：

background-image: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);

上面#fb3 25%表示從0-25%區域是實色。#58a 0, #58a 50%等價于#58a 25%, #58a 50%，表示從25-50%區域從#58a漸變至#58a，等于實色。#fb3 0, #fb3 75%等價于#fb3 50%, #fb3 75%，表示從50-75%區域為從#fb3漸變至#fb3，等于實色。最后#58a 0等價于#58a 75%，表示從75%開始全都是實色。

你也可以發揮想象力，將實色這個特點還可用于遮蔽，達到切角效果。這樣就避免了多個標簽，通過層疊覆蓋來實現切角。用漸變簡單方便。

.clip {
    background: #58a;
    background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
                linear-gradient(-135deg, transparent 15px, #58a 0) top right,
                linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
                linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    padding: .5em .6em;
    color: white;
    font: 50px/64px "微軟雅黑";
}

<span class="clip">禮</span>

你也可以將上面線性漸變改成下面介紹的徑向漸變來實現弧形切角。

徑向漸變

線性漸變是沿著一條直線漸變，而徑向漸變是圓形或橢圓形漸變。相比之下稍微復雜一點。

W3C標準語法：radial-gradient(position, shape, size, color-stop);

第一個參數size at position。size指定水平半徑和垂直半徑。position指明圓心位置，默認值center表示元素中心為漸變的圓心。同樣可以指定為top，right，bottom，left，也可以自定義px值或%百分比，對應關系如下。

第二個參數size shape。shape可設circle，ellipse。看名字就知道了，前者表示圓形漸變，后者表示橢圓形漸變。

如果shape設成circle，那size的px值就是圓形半徑，但不能用%百分比。例如40px circle表示半徑為40px的圓型漸變。

如果shape設成ellipse，那size的值分別為橢圓的水平半徑和垂直半徑。可以用%百分比。例如30% 80% ellipse表示水平半徑30%（相對于元素的寬），垂直半徑80%（相對于元素的高）的橢圓型漸變。具體效果見下圖的第三行。

前兩個參數可以合并成size shape at position。例如100px 60px ellipse at right表示圓心在右中位置，水平半徑100px，垂直半徑60px的橢圓漸變。效果見下圖第9單元格。

上面的size除了設px值或%百分比外，還有預定義好的關鍵字closest-side，closest-corner，farthest-side，farthest-corner（默認值）。看名字也能猜出意思，例如默認值farthest-corner表示漸變半徑為從圓心到離圓心最遠的角落。效果見下圖第4行各單元格。

第四個參數color-stop()函數，在線性漸變里有介紹，不贅述。

效果圖如下，表行就是radial-gradient的參數：

多色漸變

上面的漸變都只設了兩個顏色，一個起始一個終止。其實可以設多個顏色達到多色漸變的效果。例如，左圖線性漸變模擬日出效果，右圖徑向漸變模擬太陽。純CSS實現，毫無PS痕跡。

//左圖日出
background-image: linear-gradient(to bottom, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%);
//右圖太陽
background-image: radial-gradient(circle,red,orange,#071B26);

重復漸變

CSS3之前想要對background-image實現重復漸變需要配合background-repeat，但也僅限于重復線性漸變，無法重復徑向漸變。CSS3提供了repeating-linear-gradient和repeating-radial-gradient便捷地實現重復漸變。例如

//重復線性漸變
background-image: repeating-linear-gradient(red,green 40px, orange 80px);
//重復徑向漸變
background-image: repeating-radial-gradient(black 10px,black 20px,#2a2a2a 30px,#2a2a2a 40px);

上面介紹過條紋背景的實現，但現實中的條紋背景，25%的顆粒度實在太大，比如我們想實現每個條紋的寬度為15px，用重復漸變就可以輕松實現：

background-image: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

但通常條紋狀背景色可能色差不是那么大，而且如果瀏覽器不支持repeating-linear-gradient就顯示不出背景了。因此一種安全的重復漸變方案是，主色調作為背景，而輔助條紋用漸變：

background: #58a;
background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
              transparent 0, transparent 30px);

順著這個思路可以實現信封效果：（關于background兩層背景的思路，可以參照這里）

background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, 
                  #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;

還有常見的剪裁的效果：

border: 1px solid transparent;
background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;
animation: ants 12s linear infinite;    //增加動畫效果

@keyframes ants { 
    from { background-position: 0 0; }
    to { background-position: 100% 100%; } 
}

增加動畫效果后虛線的邊框會不停滑動（關于animation你可以點擊這里），單純將border設成dashed是無法實現滑動效果的。

兼容性

目前gradient在眾多瀏覽器上表現不錯，但有些低端瀏覽器上會出現一些兼容性的問題。我的建議是放棄它們吧，低端瀏覽器活不過今年。況且漸變畢竟屬于漸進增強，即使沒有漸變效果也不影響用戶的實際使用。

但有時人在江湖身不由己，想象一下和河馬們或客戶們解釋瀏覽器的占有率，解釋漸進增強是件多么累人的事吧。況且你心里很清楚，懂的人不需要解釋，不懂的人解釋了也沒用。所以你可以考慮以下方案模擬出gradient效果：

1. 最簡單的方式就是直接PS出一張圖片，雖然多了一次HTTP請求，但你不說誰知道呢^_
2. 使用腳本，例如PIE腳本等。但會通過JS對HTML結構進行調整，尤其涉及定位時，bug調試起來真的比較麻煩。
3. 對低端IE使用濾鏡

總結

不忘初心方得始終，來模擬實先一下小禮品的圖標（色彩可能做不到完全一致）：

.priv_icon_coupon {
    width: 70px;
    height: 70px;
    border-radius: 0.3em;
    border:3px solid #fff;
    background-image: linear-gradient(to bottom, #EF137A, #9C117A);
    font: 50px/64px "微軟雅黑";
    color: #fff;
    text-align: center;
    text-shadow: 0 1px rgba(0,0,0,.5);
}
<span class="priv_icon_coupon">禮</span>

網上也有很多牛人做的漸變效果，如Lea Verou