接着之前的[css]我要用css畫幅畫(六)，今天畫的有所不同，畫的是哆啦A夢，我們小時候對他的稱呼其實是小叮當機器貓。
（PS:這次我要做的事情，很多人已經做過，這並不是什么創新，我只是在學習並記錄下學習的過程）
這次就不多說CSS屬性的基礎概念了。 說說我畫的過程吧， 好，進入正題。
因為和之前的瞎畫不同，這次是畫現有的東西。我認為臨摹是比較簡單的。 我先上網找了下要臨摹的對象，找了個最中規中矩的圖片，如下：
這對我來說不是一個簡單的任務， 而我處理不簡單的任務的解決方案，就是把他拆分再拆分，一直拆到問題無法再拆且可以解決為止。
拆分結果如下：
1. 頭
1.1 眼睛
1.2 臉廓
1.3 鼻子
1.4 胡須
1.5 嘴唇
1.6 嘴巴
1.6.1 口腔
1.6.2 舌頭
2. 身子
2.1 項圈
2.2 鈴鐺
2.3 軀干
2.4 肚兜
2.5 百寶袋
2.6 雙手
2.6.1 手臂
2.6.2 拳頭
2.7 雙腳
2.7.1 腿
2.7.2 腳掌
這個畫我無法一次性完成，最新的效果可以在這里看到： Demo
代碼在這： https://github.com/bee0060/Css-Paint
（請根據關鍵字carton、doraemon找相應的文件）
之后我會陸續更新這幅畫，有些進展之后會記錄在該篇博客中。
-------------------------------------------------------------------------- 2015.12.24 start --------------------------------------------------------------------------
到目前為止， 完成了小叮當的頭部。 看了效果的會發現，下巴處看起來不對， 沒關系，等我加上他的圍脖后，就能遮擋住這塊不對勁的地方了。
先上代碼：
head-html
common&head-css
codepen效果： http://codepen.io/bee0060/pen/bEwRNG
這個畫畫了快一個月，才把頭畫完，主要是因為懶，三天打魚兩天曬網，其次也在中途遇到幾個難點，差點因為這些難點放棄了。
其中最難的要數嘴唇和嘴唇兩邊的類似半圓形（我叫它們做“嘴唇左邊”和“嘴唇右邊”）， 其中需要曲線、半圓、傾斜、遮蓋來完成。其中最難處理的是曲線，解決了曲線問題后，就比較順利的完成了后續的畫。
嘴唇左邊: 這里用了一個半圓加上一定的傾斜實現。但實現之初，半圓會突出到胡子的區域，我就給胡子的容器設置白色背景色，將突出到胡子區域的嘴唇左邊部分遮蓋。
嘴唇： 因為嘴唇是先向下凸，再向上，又向下的曲線，這里由3個圓角來拼接成這樣的曲線，這里做曲線的時間是最長的，遇到的問題和解決方案在下面細說。
嘴唇右邊：這里和嘴唇左邊采取相同的方法。 只是圓角的角度不相同。
曲線: 我是用圓角來實現曲線的，相信很多人都是這么處理的。但是圓角有個問題，如果只有一面有邊框（例如left），且設置圓角，這個邊框會在末端慢慢變細，這會影響呈現效果。
我的解決方案是，增加一層容器， 再給容器設置overflow:none, 然后真正擁有圓角邊框的對象在容器內， 然后調整容器和圓角對象的大小，讓邊框變細的部分超出容易，以此隱藏掉變細的部分。
畫這幅畫的過程一點也不優雅， 我無法通過數學的方式優雅的計算出每個對象的位置，每個圓角的弧度，每個傾斜的角度。 我采用最低級的方法， 在chrome中，選中元素並不斷調整各種css屬性，最終實現現在的效果。 所以這么做非常低效。 如果各位有什么好的工具或方法， 請不吝賜教。 在此先謝過。
到目前為止，只完成了頭部， 之后（應該）會陸續完善直至完成。
謝謝觀看。另外，聖誕快樂。
-------------------------------------------------------------------------- 2015.12.24 end --------------------------------------------------------------------------
-------------------------------------------------------------------------- 2015.12.27 start --------------------------------------------------------------------------
今天的更新不說功能， 只說一說這幅畫的CSS規范和策略。
本畫盡量遵照OOCSS的建議：http://www.w3cplus.com/css/oocss-concept
看了本畫代碼的同學可能會覺得很多html對象都用了一大串的class，但是細心的可能會發現有些類選擇器出現過多次。
我這么寫的目的是，在css的不同選擇器中，盡量減少同名且同值的css屬性代碼。
在html上，可以像組件一樣引用各種需要的選擇器來實現效果。
這樣可以讓css盡量短小，且不重復。 雖然html對象的class屬性很長，但是可以像組件一樣更靈活的變換組合出需要的效果。
在本畫中，只使用類選擇器，即class選擇器。
類選擇器的種類主要分為4種：
1. 組件 - 用於描述哆啦A夢的各組成部分，如頭(.head)、臉(.face)、眼睛(.eyes)等， 其中包含的css屬性為以下3種不包含的，其實就是那些不知道怎么放進以下三種選擇器中的css屬性。
2. 形狀 - 用於描述對象形狀的，如正圓行， 暫時只有.circle類， 其中只有一個屬性： border-radius: 50%;
3. 位置 - 這里不包括left、top等直接描述位置的，因為各組件的具體位置基本不可重用。這里描述的位置是：position、float，還有特殊的如margin縱向居中的類。
4. 樣式 - 如背景色類、邊框顏色類、邊框寬度類等。 例如看原圖可以看出， 這畫其實主要就那么3、4種顏色， 所以我把顏色抽出來，就不需要在一大堆類中寫重復的顏色css了。
類選擇器的命名：
我用的編輯器是Sublime Text 2， 有一個非常好用也很常用的組件是Emmet，Emmet其中一個功能是可以打很少的字符來輸入css，於是我的類選擇器，如果其中只設置一個屬性的話，一般就用這個屬性和值在Emmet中的簡寫來表示，還有些用屬性名的簡寫加上對應值的名稱，用橫杠鏈接來表示。如：
1 /*
2 左邊為Emmet 中的簡寫，右邊為表示的css屬性
3 pos ==> position
4 bac ==> background-color
5 於是我有如下類選擇器：
6 */
7
8 .pos-a {
9 position: absolute;
10 }
11
12
13 .bacc-white {
14 background-color: white;
15 }
在html中使用選擇器時， 也按照選擇器類別的順序： 組件->形狀->位置->樣式， 如下：
1 <div class="eye eye-left circle pos-a bacc-white"> 2 </div>
其中組件有可能有擴展和子組件的關系，就根據組件選擇器的輩份從前到后排列。
好了，我的html和css書寫規范說完了。 下次更新應該至少會畫個圍脖（或叫項圈）吧。
謝謝觀看。
-------------------------------------------------------------------------- 2015.12.27 end --------------------------------------------------------------------------
-------------------------------------------------------------------------- 2016.01.04 end --------------------------------------------------------------------------
經過幾天斷斷續續的努力， 終於把這個畫給完成了。 掌握了基本技巧之后，要完成這幅畫的難度就降低很多了。最基本的技巧不外乎：
· 圓角
· 遮蓋
· overflow hidden
· 傾斜
這次更新完成的內容較多， 包括如下：
1. 項圈 - 用一個較寬的橢圓實現， 只顯示下半圓的大部分，用容器把不需要的超出部分隱藏。 鈴鐺里的曲線也是用會超出容器的兩個上下並排的圓實現
2. 身體 - 用不規則的橢圓實現
3. 百寶袋 - 用兩個不規則橢圓實現上邊和下邊
4. 雙手 - 用橢圓和傾斜實現手臂，再用正圓的手掌遮蓋不需要的部分
5. 雙腳 - 用兩個不規則橢圓實現左右兩腿， 用一個白底黑邊的橢圓實現褲襠（~。~），並遮蓋在兩腿之間，實現最終效果。 用橢圓和傾斜實現雙腳。
大體上已經完成， 細節還是看得出差異，不過我個人已經比較滿意這個效果了。 之后可能只會花一點點時間去微調一下細節部分。
所以， 這幅畫到此結束。 謝謝觀看。
-------------------------------------------------------------------------- 2016.01.04 end --------------------------------------------------------------------------
完.....
最終效果： Demo
Code pen效果: http://codepen.io/bee0060/pen/rxjKxP
關鍵html：
View Code
完整css：
View Code
（在這里再發一次demo鏈接， 希望可以省去你滾動回本文頂部的時間）
（至於畫完這個接着做什么， 現在有幾個想法可以做， 也可能做其他東西， 管他呢，隨心而至就是了）
有任何問題或意見，歡迎交流。
如果發現本文有什么問題（如錯別字），請不吝告知，謝謝。
轉載請注明出處：[css]我要用css畫幅畫(七) - 哆啦A夢