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

線性漸變

W3C標(biāo)準(zhǔn)語法：linear-gradient(angle, color… color);酸休。第一個參數(shù)指明漸變方向，0deg表示漸變從下往上祷杈，90deg表示漸變從左往右斑司，180deg表示漸變從上往下，270deg表示漸變從右往左但汞。其實就是順時針走一圈宿刮。你也可以用to + 關(guān)鍵字，例如to top等于0deg私蕾，to right等于90deg僵缺，to bottom等于180deg，to left等于270deg踩叭。第二參數(shù)是起始顏色磕潮，中間可以指定多個顏色，依次漸變容贝，最后一個參數(shù)是終止顏色自脯。權(quán)威請參照W3C

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

新版瀏覽器用W3C的標(biāo)準(zhǔn)語法沒問題焕参，但低版本可能尚不支持W3C的標(biāo)準(zhǔn)語法，此時你需要使用各瀏覽器私有的語法油额。當(dāng)然如果你的頁面不準(zhǔn)備繼續(xù)支持這些低版本的瀏覽器的話叠纷，此段可以略過。

Webkit引擎（Chrome和Safari）潦嘶，Genko引擎（Firefox）涩嚣，Presto引擎（Opera），Trident引擎（IE）的私有語法和和W3C的標(biāo)準(zhǔn)語法非常像衬以。區(qū)別如下：

1. 需要加上前綴缓艳，分別是-webkit-，-moz-看峻，-ms-
2. -webkit-阶淘，-ms-的第一個參數(shù)的關(guān)鍵字表示起始位置，因此不需要加to互妓。例如-webkit-linear-gradient(top, #fff, #000);等價于W3C標(biāo)準(zhǔn)語法的linear-gradient(to bottom, #fff, #000);
3. -moz-的第一個參數(shù)的關(guān)鍵字可以可不加to溪窒。不加to表示起始位置坤塞，加to表示終止位置。例如-moz-linear-gradient(top, #fff, #000);等價于-moz-linear-gradient(to bottom, #fff, #000);
4. IE10以下是不支持漸變的…因此沒有私有語法
5. Opera從37開始支持澈蚌，試了下并沒有私有語法摹芙，加上-o-前綴反而不認(rèn)…

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

為縮減篇幅旁钧，下面仍以介紹W3C標(biāo)準(zhǔn)語法為主吸重。

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

不在位置范圍內(nèi)的顏色表示不漸變，會填充為實色坡疼。例如：

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

漸變區(qū)域只集中在中間20-80%區(qū)域彬呻。上部20%是#fb3的實色，下部20%是#58a的實色柄瑰。即上下各20%的區(qū)域都是實色闸氮，不漸變。因此如果你將兩個顏色的位置值均設(shè)為50%教沾，就出現(xiàn)了完全沒有漸變效果蒲跨，全部實色的背景：

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

另外，標(biāo)準(zhǔn)規(guī)定：如果顏色的位置值比在它之前的所有顏色的位置值都小授翻，那該顏色的位置值會被調(diào)整為它前面所有顏色位置值的最大值或悲。因此上面代碼可以把第二個色標(biāo)位置值設(shè)為0：

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

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

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

上面#fb3 25%表示從0-25%區(qū)域是實色孙咪。#58a 0, #58a 50%等價于#58a 25%, #58a 50%，表示從25-50%區(qū)域從#58a漸變至#58a巡语，等于實色翎蹈。#fb3 0, #fb3 75%等價于#fb3 50%, #fb3 75%，表示從50-75%區(qū)域為從#fb3漸變至#fb3男公，等于實色荤堪。最后#58a 0等價于#58a 75%，表示從75%開始全都是實色枢赔。

你也可以發(fā)揮想象力澄阳，將實色這個特點還可用于遮蔽，達(dá)到切角效果糠爬。這樣就避免了多個標(biāo)簽寇荧，通過層疊覆蓋來實現(xiàn)切角。用漸變簡單方便执隧。

.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>

你也可以將上面線性漸變改成下面介紹的徑向漸變來實現(xiàn)弧形切角揩抡。

徑向漸變

線性漸變是沿著一條直線漸變，而徑向漸變是圓形或橢圓形漸變镀琉。相比之下稍微復(fù)雜一點峦嗤。

W3C標(biāo)準(zhǔn)語法：radial-gradient(position, shape, size, color-stop);

第一個參數(shù)size at position。size指定水平半徑和垂直半徑屋摔。position指明圓心位置烁设，默認(rèn)值center表示元素中心為漸變的圓心。同樣可以指定為top钓试，right装黑，bottom，left弓熏，也可以自定義px值或%百分比恋谭，對應(yīng)關(guān)系如下。

第二個參數(shù)size shape其掂。shape可設(shè)circle，ellipse橄教∏蹇埽看名字就知道了喘漏，前者表示圓形漸變，后者表示橢圓形漸變华烟。

如果shape設(shè)成circle翩迈，那size的px值就是圓形半徑，但不能用%百分比盔夜。例如40px circle表示半徑為40px的圓型漸變负饲。

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

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

上面的size除了設(shè)px值或%百分比外，還有預(yù)定義好的關(guān)鍵字closest-side锅尘，closest-corner监氢，farthest-side，farthest-corner（默認(rèn)值）藤违±烁看名字也能猜出意思，例如默認(rèn)值farthest-corner表示漸變半徑為從圓心到離圓心最遠(yuǎn)的角落顿乒。效果見下圖第4行各單元格牛欢。

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

效果圖如下隔盛，表行就是radial-gradient的參數(shù)：

多色漸變

上面的漸變都只設(shè)了兩個顏色犹菱，一個起始一個終止。其實可以設(shè)多個顏色達(dá)到多色漸變的效果吮炕。例如腊脱，左圖線性漸變模擬日出效果，右圖徑向漸變模擬太陽龙亲。純CSS實現(xiàn)陕凹，毫無PS痕跡悍抑。

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

重復(fù)漸變

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

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

上面介紹過條紋背景的實現(xiàn)佑女，但現(xiàn)實中的條紋背景记靡，25%的顆粒度實在太大，比如我們想實現(xiàn)每個條紋的寬度為15px团驱，用重復(fù)漸變就可以輕松實現(xiàn)：

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

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

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

順著這個思路可以實現(xiàn)信封效果：（關(guān)于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%; } 
}

增加動畫效果后虛線的邊框會不臀裳。滑動（關(guān)于animation你可以點擊這里）啼止，單純將border設(shè)成dashed是無法實現(xiàn)滑動效果的。

兼容性

目前gradient在眾多瀏覽器上表現(xiàn)不錯丛楚，但有些低端瀏覽器上會出現(xiàn)一些兼容性的問題族壳。我的建議是放棄它們吧，低端瀏覽器活不過今年趣些。況且漸變畢竟屬于漸進(jìn)增強(qiáng)仿荆，即使沒有漸變效果也不影響用戶的實際使用。

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

1. 最簡單的方式就是直接PS出一張圖片顾瞪，雖然多了一次HTTP請求舔庶，但你不說誰知道呢^_
2. 使用腳本，例如PIE腳本等陈醒。但會通過JS對HTML結(jié)構(gòu)進(jìn)行調(diào)整惕橙，尤其涉及定位時，bug調(diào)試起來真的比較麻煩钉跷。
3. 對低端IE使用濾鏡

總結(jié)

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

.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>

網(wǎng)上也有很多牛人做的漸變效果，如Lea Verou