摘要：分為線性漸變和徑向漸變。而我們今天主要是通過一個(gè)小例子來針對線性漸變來剖析其具體的用法。今天的例子就是用的線性漸變制作一個(gè)大致的針孔注射器。第一個(gè)參數(shù)表示線性漸變的方向，是從上到下是從左到右，如果定義成，那就是從左上角到右下角。

CSS3 Gradient 分為 linear-gradient（線性漸變）和 radial-gradient（徑向漸變）。而我們今天主要是通過一個(gè)小例子來針對線性漸變來剖析其具體的用法。

今天的例子就是用CSS3 的線性漸變制作一個(gè)大致的針孔注射器。

首先來看一下最終效果，例子比較簡單，主要應(yīng)用到的就是CSS3里的 linear-gradient。

http://jsbin.com/vecujedubu/edit?output

看完Demo，我們首先來看一下HTML結(jié)構(gòu)。

CSS 部分

    .injector_wrap{
        width: 200px;
        margin: 120px auto 0;
    }
    .injector__box{
        background: -webkit-linear-gradient(45deg ,#ccc,#ecf0f1,#CCC);
        background : -webkit-gradient(linear,left center,right center, from(#ccc) , color-stop(0.5,#ecf0f1) , to(#CCC) );
        width: 40px;
        height: 180px;
        position: relative;
    }
    .injector__box::before{
        position: absolute;
        content: " ";
        left: 15px;
        width: 10px;
        height: 30px;
        background: -webkit-linear-gradient(left ,#ccc,#ecf0f1,#CCC);
        background : -webkit-gradient(linear,left center,right center,from(#ccc),color-stop(0.5,#ecf0f1),to(#ccc));
        bottom: 100%;
    }
    .water{
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 20px;
        background-color: #62d2e2;
    }
    .water::before{
        position: absolute;
        content: " ";
        width: 10px;
        background-color: #62d2e2;
        top: -30px;
        height: 30px;
        left: 15px;
    }
    .injector__hat{
        transition: all ease 0.6s ;
        position: absolute;
        width: 100%;
        height: 20px;
        background: -webkit-linear-gradient(left ,#282E33,#5D5D5D,#282E33);
        background:-webkit-gradient(linear,left center,right center,from(#282e33), color-stop(0.5,#5d5d5d), to(#282e33));
        bottom: 0px;
        -webkit-animation: autoPushWater 3s linear 0s infinite;
        -o-animation: autoPushWater 3s linear 0s infinite;
        animation: autoPushWater 3s linear 0s infinite;
    }
    .injector__hat::before{
        position: absolute;
        content: " ";
        width: 0;
        height: 0;
        border-left : 20px dashed transparent;
        border-right : 20px dashed transparent;
        border-bottom : 15px solid #2c3e50;
        bottom: 100%;
    }
    .injector__handle{
        position: absolute;
        content: " ";
        left: 10px;
        width: 20px;
        height: 180px;
        background-color: #c0392b;
        background:-webkit-gradient(linear,left center,right center, from(#80261c),color-stop(0.5,#c0392b), to(#420600));
        background: -webkit-linear-gradient(left ,#80261C,#c0392b,#420600);
        top: 100%;
    }
    .injector__handle::after{
        position: absolute;
        content: " ";
        left: -20px;
        width: 60px;
        height: 4px;
        background:-webkit-gradient(linear,left center,right center,from(#80261c), color-stop(0.5,#c0392b), to(#420600));
        background: -webkit-linear-gradient(left ,#80261C,#c0392b,#420600);
        top: 100%;
    }
    @-webkit-keyframes autoPushWater {
        from {bottom: 0  }
        50%{bottom:144px;}
        to {bottom: 0px;  }
    }
    @-o-keyframes autoPushWater {
        from {bottom: 0  }
        50%{bottom:144px;}
        to {bottom: 0px;  }
    }
    @-moz-keyframes autoPushWater {
        from {bottom: 0  }
        50%{bottom:144px;}
        to {bottom: 0px;  }
    }
    @keyframes autoPushWater {
        from {bottom: 0  }
        50%{bottom:144px;}
        to {bottom: 0px;  }
    }

CSS部分其實(shí)也蠻簡單的，其他部分不說了，相信都可以看懂是什么意思、有什么用。我們就把這次的核心內(nèi)容linear-gradient 拿出來多帶帶分析一下。

細(xì)心的小伙伴應(yīng)該會發(fā)現(xiàn)，在CSS中linear-gradient 出現(xiàn)了兩種方式，都是webkit前綴的。其實(shí)兩者都是Webkit內(nèi)核對于linear-gradient的實(shí)現(xiàn)，只不過一個(gè)是早期實(shí)現(xiàn)-webkit-gradient，一個(gè)是修改后的參照標(biāo)準(zhǔn)的實(shí)現(xiàn)-webkit-linear-gradient。

首先我們來分析一下早期實(shí)現(xiàn)-webkit-gradient.

-webkit-gradient(linear,left center,right center,from(#80261c), color-stop(0.5,#c0392b), to(#420600));
// 原始語法
-webkit-gradient(,  [, ]?,  [, ]? [, ]*) //老式語法書寫規(guī)則

-webkit-gradient 是 webkit 引擎對漸變的實(shí)現(xiàn)參數(shù)，一共有五個(gè)。

第一個(gè)參數(shù)表示漸變類型（type），可以是 linear（線性漸變）或者 radial（徑向漸變）。

第二個(gè)參數(shù)和第三個(gè)參數(shù)，都是一對值，分別表示漸變起點(diǎn)和終點(diǎn)。這對值可以用坐標(biāo)形式表示，也可以用關(guān)鍵值表示，比如 left top（左上角）和left bottom（左下角）。

第四個(gè)和第五個(gè)參數(shù)，分別是兩個(gè)color-stop函數(shù)。color-stop 函數(shù)接受兩個(gè)參數(shù)，第一個(gè)表示漸變的位置，0為起點(diǎn)，0.5為中點(diǎn)，1為結(jié)束點(diǎn)；第二個(gè)表示該點(diǎn)的顏色。

如果color-stop第一個(gè)參數(shù)是0或者1的話，那么可以使用from或者to來代替，from、to 只有1個(gè)參數(shù)——色值。from(hex) 效果上等于 color-stop(0,hex),而 to(hex) 等同于 color-stop(1,hex)。

所以上面例子中的代碼可以修改為。

-webkit-gradient(linear,left center,right center,color-stop(0,#80261c), color-stop(0.5,#c0392b), color-stop(1,#420600));

-webkit-gradient(linear,left center,right center,from(#80261c), color-stop(0.5,#c0392b), to(#420600));

在WebKit的-webkit-linear-gradient()中不能同時(shí)設(shè)置位置和角度?？梢酝ㄟ^設(shè)置顏色中間點(diǎn)達(dá)到相同的效果。即如果設(shè)置了 left top 和 漸變軸角度的話會導(dǎo)致CSS解析錯誤，無法達(dá)到預(yù)期效果。

接下來是Webkit按照標(biāo)準(zhǔn)實(shí)現(xiàn)的漸變-webkit-linear-gradient。

-webkit-linear-gradient(left,#80261C,#c0392b,#420600);
// 原始語法
-webkit-linear-gradient([ || ,]? ,  [, ]); 

-webkit-linear-gradient 有三個(gè)參數(shù)。

第一個(gè)參數(shù)表示線性漸變的方向，top 是從上到下、left 是從左到右，如果定義成 left top，那就是從左上角到右下角。

第二個(gè)和第三個(gè)參數(shù)分別是起點(diǎn)顏色和終點(diǎn)顏色。你還可以在它們之間插入更多的參數(shù)，表示多種顏色的漸變。

在標(biāo)準(zhǔn)實(shí)現(xiàn)中，取消了from、to、color-stop等函數(shù)，開發(fā)人員只需定義漸變起點(diǎn)或者漸變軸角度以及漸變的色值即可實(shí)現(xiàn)漸變。

注意：漸變起點(diǎn)和漸變軸角度不可同時(shí)設(shè)置，這樣會引起CSS解析錯誤，無法達(dá)到預(yù)期效果。

戚戚然不知所言，到這里算是收尾了。本篇算是個(gè)不折不扣的標(biāo)題黨，并沒有去分析FF、Opera以及IE下的CSS漸變實(shí)現(xiàn)。截至目前為止，F(xiàn)F、Opera的實(shí)現(xiàn)和Webkit的新版實(shí)現(xiàn)基本保持一致，唯一的問題則是IE，歷史版本和新版本的IE各有其實(shí)現(xiàn)，有興趣的話可以去查找相關(guān)資料學(xué)習(xí)參考一下。

參考資料:

linear-gradient