今天要給大家展示的是如何繪製一個熊貓頭像，就是這個
如果這是用Photoshop繪製出來的，你也許並不感到奇怪。但是，我要告訴你這是HTML中的一個DIV，配合CSS3繪製出來的。
驚不驚喜！？意不意外！？
一個DIV上怎麼做出這樣複雜的效果？本篇就來一步步教教你這是如何實現的。
第一步，先從熊貓臉說起
我們先從熊貓的臉、鼻子和嘴講起，因爲這些都是用同一個DIV渲染出來的，所以首先，我們得有個DIV：
<div></div>很簡單吧。然後利用CSS3的border屬性，勾勒出熊貓的臉：
div {
width: 210px;
height: 160px;
border: 5px solid #333;
}你也許會想：這TM在逗我？！這明明就是個矩形，哪有熊貓臉是個框？別急，請放下手中的菜刀繼續看，記得CSS3中的border-radius屬性嗎？border-radius可以製作出各種各樣的圓角，我們就用border-radius屬性把臉“揉揉”圓：
div {
/* 接着剛纔的代碼 */
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border-bottom-left-radius: 110px 60px;
border-bottom-right-radius: 110px 60px;
}這樣，熊貓標準的包子臉就完成了：
“面子”的問題解決了，鼻子和嘴怎麼畫？什麼，再寫兩個DIV？只能用一個DIV哦！
這就要運用到CSS3的徑向漸變（radial-gradient）了，徑向漸變是啥？只說學名你可能不知道，但一看圖肯定就懂了：
這就是徑向漸變，以一箇中心，輻射出一個顏色漸變的橢圓。CSS3中的radial-gradient屬性就是幹這個事情的，radial-gradient用起來很簡單，來看看它的完整語法：
radial-gradient([[ circle || ][ at ]?,|[ ellipse || [ | ]{2} ][ at ]?,|[ [ circle | ellipse ] || ][ at ]?, | at ,]? [ , ]+ ) = closest-corner | closest-side | farthest-corner | farthest-side and = [ | ]?
是不是要看瘋了：這TM叫簡單？！不懂的還以爲是亂碼。。。請你把菜刀再放一放再聽我說，雖然radial-gradient的完整語法很複雜，但我們只用到其中三個參數，簡單說我們只需要告訴radial-gradient：
漸變的中心在哪，輻射的形狀是圓還是橢圓（參數1）
從什麼顏色（參數2）漸變到什麼顏色（參數3）
怎麼樣，這樣清楚了吧。那麼我們用radial-gradient畫上鼻子和嘴：
div {
/* 接着剛纔的代碼 */
background-image:
radial-gradient(ellipse at 50% 60%,
#333 12px, transparent 12px),
radial-gradient(ellipse at 50% 80%,
#555 6px, transparent 6px);
}你可能不瞭解顏色值後面的px值是什麼意思，別急，一會兒就會講到，先來看看目前的效果：
你可能會問：radial-gradient實現的圓是漸變的，圖中是怎麼畫出一個實心圓的？這兒就有個小技巧了：radial-gradient中，我們不僅可以定義漸變兩邊的顏色，還可以定義顏色漸變的距離：
對比上下兩種漸變，可以明顯地看到，當兩種顏色的漸變距離比較遠時，漸變過程比較緩和；而當漸變距離很近時，漸變的過程就很劇烈。那麼，當兩個顏色的漸變距離爲0，會怎麼樣？
你會發現漸變效果完全消失了。看到這兒應該就能明白radial-gradient中，顏色值後面的px含義了：定義了該漸變兩個顏色的兩個端點。熊貓的鼻子和嘴就是由黑色和白色的徑向漸變構成的，只不過因爲漸變距離爲0，所以就完全去除了漸變效果。
第二步 耳朵和黑眼圈
現在來畫熊貓的耳朵黑眼圈。我們唯一的DIV已經作爲熊貓臉了，用什麼來充當黑眼圈呢？你是否想起了CSS3中的 :before、:after僞元素，僞元素默認不可見，但可以用CSS讓它們展示出來。僞元素的操作方式和普通DIV一樣，所以有了:before、:after僞元素，我們就憑空多出兩個“DIV”。
沒錯， 我們只要將:before、:after兩個僞元素展示出來，加上黑色背景以及圓角，就成熊貓的黑眼圈了：
div::before, div::after {
width: 70px;
height: 40px; background-color: #333;
border-radius: 50% 50% 45% 42%;
display: block;
content: '';
position: absolute; top: 65px;
}
div::before {
left: 44px; transform: rotate(-45deg);
}
div::after {
left: 125px; transform: rotate(45deg);
}寫完代碼後效果如下：
既然僞元素被黑眼圈佔用了，就要發愁熊貓的耳朵如何實現了。幸好，山窮水復疑無路，柳暗花明又一村，你是否又想起了CSS3的box-shadow屬性？
仔細看黑眼圈和耳朵，會發現它們的外形是一致的。恰好可以利用上box-shadow的性質：元素陰影的外形根據元素本身的形狀而定。沒錯兒，兩隻耳朵就用它實現了！
div::before {
/* 接着剛纔的代碼 */
box-shadow: 10px -68px 0 -4px #333;
}
div::after {
/* 接着剛纔的代碼 */
box-shadow:-10px -68px 0 -4px #333;
}讓我們停下腳步，看看當前的效果：
不錯，已經初步成型了。如果能看到這裏，說明你已經學會了本篇中絕大部分CSS3的知識。現在就差最後的點睛之筆了！
第三步 眼睛 & 點綴
相比之前使用的技巧，眼睛的畫法就沒有什麼神奇，依然是運用了radial-gradient屬性，前面已經介紹過radial-gradient可以畫出實心圓，這裏再告訴你它的另外一個特性：radial-gradient可以互相疊加。於是，就可以實現熊貓眼睛中的眼白、瞳孔互相疊加的效果了：
div::before {
/* 接着剛纔的代碼 */
background-image:
radial-gradient(circle at 51px 20px,
white 3px, transparent 3px),
radial-gradient(circle at 46px 20px,
#333 7px, transparent 7px),
radial-gradient(circle at 45px 20px,
white 10px, transparent 10px)
}
div::after {
/* 接着剛纔的代碼 */
background-image:
radial-gradient(circle at 24px 15px,
white 3px, transparent 3px),
radial-gradient(circle at 24px 20px,
#333 7px, transparent 7px),
radial-gradient(circle at 25px 20px,
white 10px, transparent 10px)
}添加完代碼之後的效果：
最後，再對圖形做兩個細節上調整：
- 加厚臉型底部的厚度，增加些“熊樣”
- 在底部增加一些陰影，是圖形具備些立體感
div {
/* 接着之前的代碼 */
border-bottom-width: 10px;
box-shadow: inset 10px -10px 0 #eee;
}大功告成！
終於，我們用單個DIV配合CSS3完成了一幅可愛的熊貓頭像，是不是很有成就感的呢？別急別急，這還僅僅只是一個熊貓而已，如果你對單DIV繪製圖形感興趣，可以訪問這個鏈接：
沒錯，這些圖形都是僅用一個DIV做成的，其中大量地運用了border-radius、radial-gradient、box-shadow、:before和:after僞元素這些屬性。本文講解的熊貓頭像，也來自於這個網站。
通過本篇的講解，我們瞭解到了CSS3的屬性的強大，巧妙運用這些屬性，可以達成許多令人意想不到的效果！:-)