最近正發愁着畢業設計做些什么，而后閑逛時看到了諸如twitter小鳥、哆啦A夢、灰太狼等純CSS3實現的圖像。於是本着初學的心態，挑了喜歡的卡通形象來解悶。
於是花了一個晚上做完，現在想來多少有點遺憾。因為當時沒有分段做個記錄，要不現在就能搞個更詳細的制作過程給各位了。
綜上，這篇博文主要用來分享用CSS3繪圖的心得及所需的技術。
不知道園里有朋友看過《夏目友人帳》沒，不然很難向您解釋我為什么喜歡這只大肥貓……
演示地址：http://dewey.sinaapp.com/maomi/
就不提供打包下載了，源碼未壓縮，需要的朋友請右鍵另存。源碼采用MIT，博文的轉載請保留作者和出處。
廢話了那么多，我們來看下實際效果吧(以下為參考截圖)：
|
|
文藝版：在Chrome 18、Safari 5.1中展示正常，且有動畫（注意那個泡泡）； 測試了Firefox 10/11、IE 10/9，均能正常顯示，但無動畫（動畫部分使用了webkit） |
|
|
無奈版：在Opera11下的效果…… 請注意那個鋼韌的背部曲線！我會在下文中做出解釋的 |
|
|
神獸版：IE8下的顯示效果，果然霸氣側漏…… 我這兒還真沒找來IE6測試，要不還有更奇葩的呢 |
實現思路：
在美術基礎上對圖像進行粗略划分，每個部分划為一div。對該div內部元素進行同樣的操作，直至不能再划分。這樣做只是為了定位方便，雖然方法有很多，但如果你在后期要調整頭和身體相對位置的話，這樣更方便點。然后用CSS3的屬性把div調整到你想要的形狀，上色，發布，然后告訴別人，你的瀏覽器該升級了。
所用工具：
Vim和Chrome（當然你沒准兒還需有別的瀏覽器來測試兼容性），這條很無聊，畢竟各有所好。寫在這里，主要想說明下調試技巧。方法火星了，僅供和我一樣的菜鳥參考。利用Chrome萬能的F12，如果你要改變某一元素的值，只用在element--“元素”標簽頁下找到相關項，鼠標雙擊即可進行修改。技巧在於，如果你在數值上按下“上/下方向鍵”，那么相應的值就會隨之增大/減小。這在調整形狀或是改變角度時顯得尤其好用。因為你能看到一個線性的變化過程，而且你能決定何時停下來;)Safari的開發人員工具和FireBug也能提供同樣的操作。
代碼概述：
最大的一個div類名為nyancosensei，是日文“ニャンコ先生（貓咪老師）”的羅馬音。身體各部分的命名均有相應的英文來標識，這在代碼中多有體現，不再贅述。倒是想借這個機會請教下，不知道在我的代碼里，某些類的前綴是不是有點啰嗦了呢？請問有文件體積與解析效率雙贏的寫法嗎？求教。
用到的CSS3屬性：
*：以代碼中的出現順序為序
**：瀏覽器都搞出了前綴的名堂，除了讓人多寫一行基本一樣的東西外，基本也沒別的用了（這種說法不准確的，但請讓我發泄一下吧）……所以下文中的代碼示例均用xxx代替"webkit(Chrome,Safari用)","moz(Firefox用)","ms(IE用)","o(Opear用)"
***：考慮到本文的性質，不打算對相應的屬性進行過多的描述了，僅針對本例進行解釋。畢竟不少園友都貢獻過相關的知識了，而且我們還有Google。
::CSS3線性漸變::
-xxx-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
- 第一個參數是漸變的起始點，本例中用了"top"，實現了背景色自上而下的變化。可選參數還有"bottom","left","right"等，而且你還可以用百分數
- 后兩個參數代指漸變的起止色
- 值得一提的是，WebKit更新了語法，兼容Mozilla，要不然我也不會用xxx來代替了
::CSS3變形::
-xxx-transform : none | <transform-function> [ <transform-function> ]*
or:
-xxx-transform : rotate | scale | skew | translate |matrix;
- 本例中使用了rotate--"旋轉"，內部是一個表示傾斜角度的參數，正負皆可
- 頭部及不少細小部分（如花斑、嘴巴等）都利用它來實現旋轉
::CSS3圓角::
border-radius : none | <length>{1,4} [ / <length>{1,4} ]?
- 圓角的新聞應該滿世界都是了吧……不過還是有些東西值得分享下。平時用這個屬性來繪制圓角區域，一般都扔進1~4個值，分別按照top-left、top-right、bottom-right、bottom-left的順序來設置。如果僅僅這樣的話，你會看到貓咪的臉不是一張大餅的話，就是麻將牌。所以在此加入了可選的參數“/”。根據規定“/”前的值設定該角水平方向的半徑，其后的值設定垂直方向的半徑
- 本例中多處使用了該屬性（畢竟是畫圖嘛，而且我只用了兩種圖形，另外一個在下一節介紹），但是上面講的應該不很直觀，建議用上文提及調試方法對源碼進行更改，豐衣足食
::CSS3陰影::
box-shadow: <length> <length> <length> <color>
- 四個值分別代表了 陰影離開文字的橫向距離，陰影離開文字的縱向距離， 陰影的模糊半徑 和 陰影的顏色
- 貓咪腹部的陰影由此而來
非CSS3新增的屬性：
::三角形::
.nyancosensei .head .ear{ width: 0; height: 0; border-left: 70px solid transparent; border-right: 28px solid transparent; border-bottom: 89px solid #FFFFFF; }
- 以上就是繪制貓咪耳朵的代碼了，算是簡單的css小技巧，我也是通過園里一博友的文章學到的（抱歉，沒記下鏈接）
- 大家應該注意到，貓咪身上沒有描邊的只有耳朵了。其實，這是因為邊線的顏色是白的，而這兒並沒有設定背景色。
::關於遮蓋::
- 我們再來回看下Opera中的悲情展示——威武的斷背……其他瀏覽器中表現正常，所以這應該是O廠的一個bug——我很想這樣說，但其實別的瀏覽器的處理也不盡人意
- 關於圓角的遮擋，說的准確點是：用外部圓角的div遮擋內部div超出邊界的內容，怎么辦？overflow:hidden？至少一開始我這樣做是不行的。在WebKit解析中，如果外層div的position:absolute;那么內部元素所對應的外層邊界就是外層div的原始長寬，也就是那個矩形。所以就出現了那讓人無語的斷背……
- 有一點值得明確下，overflow:hidden是有效的，但解析的bug在於對外層邊界的判斷
- 看源碼大家應該都知道了，為了解決這個矛盾，我把.body的position設為static，然后WebKit就神奇般的正常了……由於當時沒有測試FF和IE，不知道這是不是瀏覽器對CSS3解析的通病。但Opera這邊，我就真沒辦法了
- 貓咪頭部的斑紋我用了另一種方式來處理：讓內部元素的邊框和外部的曲線一致，這樣就不會擋着外邊的了-_-||說着都感覺別扭。哪位朋友有更好的辦法和想法的，請一定教教我
::關於長寬的百分比::
- 也許您注意到，源碼中凡是牽扯到長寬的，我都用具體數值。之前嘗試過百分數，但都被移除了。原因是在我的Android 2.3.6手機上，用原生瀏覽器查看的話，持有該值的元素不能顯示圓角。
WebKit動畫：
.nyancosensei .bubble { -webkit-animation: 'puff' 2.5s linear infinite; } @-webkit-keyframes puff { 0% { width: 70px; height: 70px; margin: 100px 0 0 20px; } 22% { width: 90px; height: 90px; margin: 50px 0 0 20px; } 40% { width: 100px; height: 100px; margin: 20px 0 0 20px; } 70% { width: 90px; height: 90px; margin: 50px 0 0 20px; } 100% { width: 70px; height: 70px; margin: 100px 0 0 20px; } }
- 我在這兒直接貼源碼了……貌似這樣說方便點
- 第一個參數指定了keyframes的名字puff，在下文中有對其的定義
- 第二個參數指定了在多長時間內完成動畫，本例中是2.5秒
- 第三個參數指定了動畫了播放方式，有 “ease” “linear” “ease-in” “ease-out” “ease-in-out”幾個值可選，這里選用了linear方式，使得幀與幀之間過度得較為平化
- 最后一個參數指定動畫循環的次數，infinite即為無限次，默認是1
- 以上只是設定了動畫的執行方式，具體關鍵幀的定義在@-webkit-keyframes 中。百分數表示了關鍵幀相對播放進度的位置，通過在不同關鍵幀間的線性切換，動畫就有了
總結：
純CSS3的圖像繪制起來不難，但制作方法有點太過原始了，要用來代替圖像還不現實。倒是在移動設備中，由於壓縮文件體積理論上小於同分辨率的圖片，我倒是樂於那它來做些WebApp的loading圖或logo;)
開博的第一篇，不知道怎樣寫才算合適，請各位多多指教啦。