叮叮叮，鐺鐺鐺，上課了上課了，同學(xué)們挨個坐好，爆老師要點名啦！

　　額，在上課之前先說一下，本套課程所有圖例或示例包括以后涉及到的動畫，我都將使用CSS3來設(shè)計，不采用一張圖片，所以請使用Chrome瀏覽器。否則你看到亂七八糟的東西或一片空白，I Don't Care！

　　一、Gradient是什么東西？

　　這個問題比較初級，不過初級也能有高級的說法和理解，且聽我的忽悠～

　　我記得曾經(jīng)在讀《硅谷革命》的時候，喬幫主說圓角矩形無處不在，然后在那個技術(shù)尚不成熟的年代，追求完美的幫主定義下圓角矩形，并運用到了蘋果的所有設(shè)計上。是的，圓角確實很普及，但是直角矩形的設(shè)計依然存在，且不說1%幅度的視覺直角矩形，就是0幅度的純直角矩形也是大量存在的，而且還不少，隨便就能找出例子來，比如書本。比如，三角形，額，你能給三角形加一點圓角上去么？

　　但是色彩，卻是沒有純色的存在。也許你會說純色的設(shè)計無處不在。是，純色設(shè)計確實普遍，但是真正進(jìn)入你的眼睛，你看見的，你感受到的，你體驗到的，卻不會是純色，為什么？？？

　　光啊！你生活在一個漫射光的世界里，只要有光，色彩就不會純凈，最多無限的接近純凈。如果你要說沒有光的時候就是純色了，純黑。呵呵，是這樣嗎？真正沒有光的時候，你根本都不存在對色彩的感知。沒有白色，何為黑色？

　　所以，我要說：真正無處不在的，是漸變，因為，光，無處不在。

　　網(wǎng)頁設(shè)計，我們經(jīng)常使用到光使用到漸變，長久以來這些都處理為圖片，而圖片天生的弊端使得我們非常小心謹(jǐn)慎的使用。我們大量使用水平或垂直的規(guī)則漸變而回避掉圓形的斜線的合成的不規(guī)則漸變，因為只有規(guī)則漸變才能平鋪，因為不規(guī)則漸變存為8bit的png會產(chǎn)生色階，存為24bit的png文件很大，而存為jpg則因失去精度而模糊，找不到平衡點。于是充斥在頁面上的是大量的垂直的規(guī)則的漸變，但這顯然和真實情況下光的漫射、疊加、混合相去甚遠(yuǎn)。

　　而CSS3的Gradient，就是這個平衡點，盡管它仍不夠完美。

　　二、Linear Gradient【線性漸變——點到點的漸變】

　　這很簡單也很容易理解，就是從起點到終點的直線漸變。在這條線上你可以加入色彩的斷點。代碼為：

　　-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),color-stop(0.5,#999),to(#000));

　　綠色為起點坐標(biāo)，藍(lán)色為終點坐標(biāo)，橙色為斷點位置（0.5表示50%）與色彩。以下為幾種線性漸變示例：

左上（0% 0%）到右上（0% 100%）即從左到右水平漸變：
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

左上到左下即從上到下垂直漸變：
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#2A8BBE),to(#FE280E));

左上到右下即斜線漸變：
background-image:-webkit-gradient(linear,0% 0%,100% 100%,from(#2A8BBE),to(#FE280E));

水平漸變，33%處為綠色，66%處為橙色：
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

　　留意沒？漸變是作為background-image存在，那么就可以做一些通用處理，比如同樣的漸變光加不同的背景色：

background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #2A8BBE;

background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #AAD010;

background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #FF7F00;

background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #FE280E;

　　試試?yán)鞛g覽器的寬度，漸變不錯吧，色彩不錯吧，嘿嘿，那可是英來網(wǎng)的CI色彩體系。線性漸變很簡單，本不打算說的，算熱熱身吧，今天的重頭戲是接下來的硬骨頭：Radial Gradient。

　　三、Radial Gradient【徑向漸變——圓到圓的漸變】

　　在講解這個屬性前，先要咬文嚼字一下，Radial是什么意思？這很關(guān)鍵！

　　相關(guān)的中文翻譯有兩種：1、徑向。2、放射。我不用Photoshop，所以不清楚Photoshop中Radial是如何翻譯的，又是如何設(shè)置的。在Firework中，Radial被譯為放射，其設(shè)置也是放射，一根線為半徑，從圓心到圓周漸變。為什么我要特意這樣咬文嚼字一下？很長一段時間我都沒搞清楚這種漸變該怎么設(shè)置，前天我給我們的手繪妹妹講解這個屬性的時候，在她的提示下，我才發(fā)現(xiàn)為什么我一直搞不清楚這種漸變是怎么實現(xiàn)的即便我已經(jīng)使用多次了，她反過來給我上了一課，讓我明白了原理。美術(shù)專業(yè)的敏感是不一樣，當(dāng)我給她說兩個圓的漸變時，她一下就理解了。最后我發(fā)現(xiàn)我搞不清楚的根本原因就在于這個詞的理解上，我是按照Firework的放射漸變在理解，按照圓心到圓周這樣的起點終點漸變方式在理解，這是一個天大的錯誤。

　　So，記住了，這不是從一個點到一個點的漸變，而從一個圓到一個圓的漸變。不是放射漸變而是徑向漸變。好了，下面我說說什么叫圓到圓的漸變，你現(xiàn)在可以先自己想象一下再接著往下看。其實只要不陷在點到點的漸變上，這個看起來復(fù)雜的屬性其實很好理解的，當(dāng)我從該死的點到點跳出來后一下就理解了。

　　首先來看代碼，從一個圓到另一個圓的漸變，同樣你可以在過程中加入色彩斷點，代碼為：

　　-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue))

　　綠色是起始圓的圓心坐標(biāo)和半徑，藍(lán)色是目標(biāo)圓的圓心坐標(biāo)和半徑，紅色是斷點的位置和色彩。這里我提醒一下，和放射由內(nèi)至外不一樣，徑向由外到內(nèi)的漸變，剛好相反。好了，就這段代碼你能想象出來這是一個什么漸變嗎？首先這是兩個同心圓，外圓半徑為50px，內(nèi)圓半徑為0，那么就是從黑色到紅色再到藍(lán)色的正圓形漸變。下面就是這段代碼的效果：

backgroud:-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

　　同心圓是最簡單的，也是最容易產(chǎn)生點到點誤解，因為一看就是從黑色到紅色再從紅色到藍(lán)色，一條直線。實際上不是這樣的，現(xiàn)在我小改一下，仍是同心圓，不過內(nèi)圓半徑改為10px。

backgroud:-webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));

　　有沒有問題？我問一個：為什么中間有一片純藍(lán)色？如果你疑惑，那么你仍是用放射思路去看的。現(xiàn)在我用純色來指明，漸變的范圍在哪里。

background:-webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.1,white),color-stop(0.5,white),color-stop(0.5,red),color-stop(0.6,white),color-stop(0.9,white),to(blue));

　　白色區(qū)域是Radial的漸變范圍，紅色斷點在白色的50%間。有沒有搞清楚？現(xiàn)在我再改變一下，不再是同心圓了，內(nèi)圓圓心向右20px偏移。

backgroud:-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));

　　明白沒？如果還沒明白，回到白色示例來看：

background:-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.1,white),color-stop(0.5,white),color-stop(0.5,red),color-stop(0.6,white),color-stop(0.9,white),to(blue));

　　再不明白，我就沒轍啦！一句話總結(jié)：所謂徑向漸變，所謂圓到圓的漸變，就是指外圓周到內(nèi)圓周的漸變。如果這個明白了，那么下面這個圖就應(yīng)該明白為什么會產(chǎn)生了：

backgroud:-webkit-gradient(radial,50 50,50,89 50,10,from(black),color-stop(0.5,red),to(blue));
外圓與內(nèi)圓幾乎內(nèi)切，1px。

backgroud:-webkit-gradient(radial,50 50,50,90 50,10,from(black),color-stop(0.5,red),to(blue));
外圓與內(nèi)圓內(nèi)切。

backgroud:-webkit-gradient(radial,50 50,50,91 50,10,from(black),color-stop(0.5,red),to(blue));
內(nèi)圓剛剛超出外圓1px，產(chǎn)生了兩個交點和切線。

backgroud:-webkit-gradient(radial,50 50,50,150 50,10,from(black),color-stop(0.5,red),to(blue));
內(nèi)圓已經(jīng)離開外圓。

　　看看當(dāng)內(nèi)圓離開外圓時的白色范圍：

background:-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.1,white),color-stop(0.5,white),color-stop(0.5,red),color-stop(0.6,white),color-stop(0.9,white),to(blue));

　　好了，更多的情況我就不繼續(xù)了，自己可以去試驗。了解了原理，我們來做一個來自頂部的漫射光，開盞燈，嘿嘿：

backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));

　　貼一張我的設(shè)計，你懂得，只有一個div，沒有任何圖片，一個月前做的，當(dāng)時還是稀里糊涂，效果現(xiàn)在看來并不好：

　　再貼一個實際應(yīng)用場所，半個月前做的，有很多進(jìn)步了：

　　額，絕密的英來網(wǎng)正式版界面發(fā)生泄漏事件鳥……So，不能繼續(xù)了，下課下課！稍等，下課前還有兩件事：1、布置家庭作業(yè)。2、口水不能忘了噴。

　　四、家庭作業(yè)

　　實現(xiàn)一個橢圓形的徑向漸變。

　　五、口水話

　　目前漸變還沒有完全成熟，最麻煩的是Firefox和Webkit的實現(xiàn)寫法差別太大，IE9 Beta也尚未提供支持。漸變類型也僅僅限于線性和徑向，且徑向漸變不能使用百分比來定義。還有一個問題，在沒有GPU的情況下，大面積徑向漸變（比如500X500）對渲染性能的影響極其大，甚至大過多個頁面內(nèi)容的疊加！這是我國慶節(jié)才發(fā)現(xiàn)的，當(dāng)大面積使用徑向漸變的時候，我們的所有交互動畫都變得不流暢了。但是當(dāng)GPU打開的時候，就沒任何問題，這也從另外一個角度說明了GPU的重要性和它在可見的未來里所擁有的地位：那是必須的！但是目前Chrome的GPU在渲染上問題相當(dāng)多，我正在就GPU的各種CSS3渲染問題和Chrome團(tuán)隊聯(lián)系和溝通。

　　雖然還有很多很多問題，還有很多很多不足，還有很多很多限制，但是它已經(jīng)可以解決很多問題了，尤其在減少圖片的使用下，尤其在顯示速度上，沒有等待圖片下載的過程，沒有閃爍，直接渲染呈現(xiàn)，體驗相當(dāng)好。而且代碼矢量，維護(hù)性通用性那根本不是圖片能比擬的。

　　由于忙于英來網(wǎng)正式版的開發(fā)，所以根本沒有時間來對自己圍繞在HTML5上的技術(shù)應(yīng)用和探索和經(jīng)驗心得進(jìn)行整理成文。國慶期間花了一天時間把這篇文章整理出來了，算是個先行版，所謂前傳。之后我又將撲到產(chǎn)品的開發(fā)上，離上線不遠(yuǎn)了，而英來網(wǎng)正式版上線之時就是《重構(gòu)之美》第四部正式提筆連載之時。

　　下課！

it知識庫：重構(gòu)之美－浴火重生的火鳳凰CSS3，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。