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

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

　　一、Gradient是什么東西？

　　這個(gè)問(wèn)題比較初級(jí)，不過(guò)初級(jí)也能有高級(jí)的說(shuō)法和理解，且聽(tīng)我的忽悠～

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

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

　　光啊！你生活在一個(gè)漫射光的世界里，只要有光，色彩就不會(huì)純凈，最多無(wú)限的接近純凈。如果你要說(shuō)沒(méi)有光的時(shí)候就是純色了，純黑。呵呵，是這樣嗎？真正沒(méi)有光的時(shí)候，你根本都不存在對(duì)色彩的感知。沒(méi)有白色，何為黑色？

　　所以，我要說(shuō)：真正無(wú)處不在的，是漸變，因?yàn)椋猓瑹o(wú)處不在。

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

　　而CSS3的Gradient，就是這個(gè)平衡點(diǎn)，盡管它仍不夠完美。

　　二、Linear Gradient【線性漸變——點(diǎn)到點(diǎn)的漸變】

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

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

　　綠色為起點(diǎn)坐標(biāo)，藍(lán)色為終點(diǎn)坐標(biāo)，橙色為斷點(diǎn)位置（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));

　　留意沒(méi)？漸變是作為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覽器的寬度，漸變不錯(cuò)吧，色彩不錯(cuò)吧，嘿嘿，那可是英來(lái)網(wǎng)的CI色彩體系。線性漸變很簡(jiǎn)單，本不打算說(shuō)的，算熱熱身吧，今天的重頭戲是接下來(lái)的硬骨頭：Radial Gradient。

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

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

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

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

　　首先來(lái)看代碼，從一個(gè)圓到另一個(gè)圓的漸變，同樣你可以在過(guò)程中加入色彩斷點(diǎn)，代碼為：

　　-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)和半徑，紅色是斷點(diǎn)的位置和色彩。這里我提醒一下，和放射由內(nèi)至外不一樣，徑向由外到內(nèi)的漸變，剛好相反。好了，就這段代碼你能想象出來(lái)這是一個(gè)什么漸變嗎？首先這是兩個(gè)同心圓，外圓半徑為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));

　　同心圓是最簡(jiǎn)單的，也是最容易產(chǎn)生點(diǎn)到點(diǎn)誤解，因?yàn)橐豢淳褪菑暮谏郊t色再?gòu)募t色到藍(lán)色，一條直線。實(shí)際上不是這樣的，現(xiàn)在我小改一下，仍是同心圓，不過(guò)內(nèi)圓半徑改為10px。

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

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

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的漸變范圍，紅色斷點(diǎn)在白色的50%間。有沒(méi)有搞清楚？現(xiàn)在我再改變一下，不再是同心圓了，內(nèi)圓圓心向右20px偏移。

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

　　明白沒(méi)？如果還沒(méi)明白，回到白色示例來(lá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));

　　再不明白，我就沒(méi)轍啦！一句話總結(jié)：所謂徑向漸變，所謂圓到圓的漸變，就是指外圓周到內(nèi)圓周的漸變。如果這個(gè)明白了，那么下面這個(gè)圖就應(yīng)該明白為什么會(huì)產(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)生了兩個(gè)交點(diǎn)和切線。

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

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

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ù)了，自己可以去試驗(yàn)。了解了原理，我們來(lái)做一個(gè)來(lái)自頂部的漫射光，開(kāi)盞燈，嘿嘿：

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

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

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

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

　　四、家庭作業(yè)

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

　　五、口水話

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

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

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

　　下課！

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

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