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

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

　　一、Gradient是什么東西？

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

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

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

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

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

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

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

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

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

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

　　綠色為起點坐標，藍色為終點坐標，橙色為斷點位置（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;

　　試試拉伸瀏覽器的寬度，漸變不錯吧，色彩不錯吧，嘿嘿，那可是英來網的CI色彩體系。線性漸變很簡單，本不打算說的，算熱熱身吧，今天的重頭戲是接下來的硬骨頭：Radial Gradient。

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

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

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

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

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

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

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

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

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

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

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

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));

　　白色區域是Radial的漸變范圍，紅色斷點在白色的50%間。有沒有搞清楚？現在我再改變一下，不再是同心圓了，內圓圓心向右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));

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

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

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

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

backgroud:-webkit-gradient(radial,50 50,50,150 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));

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

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

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

　　再貼一個實際應用場所，半個月前做的，有很多進步了：

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

　　四、家庭作業

　　實現一個橢圓形的徑向漸變。

　　五、口水話

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

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

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

　　下課！