今天要給大家展示的是如何繪制一個(gè)熊貓頭像，就是這個(gè)
如果這是用Photoshop繪制出來(lái)的，你也許并不感到奇怪。但是，我要告訴你這是HTML中的一個(gè)DIV，配合CSS3繪制出來(lái)的。
驚不驚喜??？意不意外！？
一個(gè)DIV上怎么做出這樣復(fù)雜的效果？本篇就來(lái)一步步教教你這是如何實(shí)現(xiàn)的。
第一步，先從熊貓臉說(shuō)起
我們先從熊貓的臉、鼻子和嘴講起，因?yàn)檫@些都是用同一個(gè)DIV渲染出來(lái)的，所以首先，我們得有個(gè)DIV：
<div></div>
很簡(jiǎn)單吧。然后利用CSS3的border屬性，勾勒出熊貓的臉：
div {
width: 210px;
height: 160px;
border: 5px solid #333;
}
你也許會(huì)想：這TM在逗我？！這明明就是個(gè)矩形，哪有熊貓臉是個(gè)框？別急，請(qǐng)放下手中的菜刀繼續(xù)看，記得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;
}
這樣，熊貓標(biāo)準(zhǔn)的包子臉就完成了：
“面子”的問(wèn)題解決了，鼻子和嘴怎么畫(huà)？什么，再寫(xiě)兩個(gè)DIV？只能用一個(gè)DIV哦！
這就要運(yùn)用到CSS3的徑向漸變（radial-gradient）了，徑向漸變是啥？只說(shuō)學(xué)名你可能不知道，但一看圖肯定就懂了：
這就是徑向漸變，以一個(gè)中心，輻射出一個(gè)顏色漸變的橢圓。CSS3中的radial-gradient屬性就是干這個(gè)事情的，radial-gradient用起來(lái)很簡(jiǎn)單，來(lái)看看它的完整語(yǔ)法：
radial-gradient([[ circle || <length> ][ at <position> ]?,|[ ellipse || [ <length> | <percentage> ]{2} ][ at <position> ]?,|[ [ circle | ellipse ] || <extent-keyword> ][ at <position> ]?, | at <position>,]? <color-stop> [ , <color-stop> ]+ )<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop> = <color> [ <percentage> | <length> ]?
是不是要看瘋了：這TM叫簡(jiǎn)單？！不懂的還以為是亂碼。。。請(qǐng)你把菜刀再放一放再聽(tīng)我說(shuō)，雖然radial-gradient的完整語(yǔ)法很復(fù)雜，但我們只用到其中三個(gè)參數(shù)，簡(jiǎn)單說(shuō)我們只需要告訴radial-gradient：
漸變的中心在哪，輻射的形狀是圓還是橢圓（參數(shù)1）
從什么顏色（參數(shù)2）漸變到什么顏色（參數(shù)3）
怎么樣，這樣清楚了吧。那么我們用radial-gradient畫(huà)上鼻子和嘴：
div {
/* 接著剛才的代碼 */
background-image:
radial-gradient(ellipse at 50% 60%,
#333 12px, transparent 12px),
radial-gradient(ellipse at 50% 80%,
#555 6px, transparent 6px);
}
你可能不了解顏色值后面的px值是什么意思，別急，一會(huì)兒就會(huì)講到，先來(lái)看看目前的效果：
你可能會(huì)問(wèn)：radial-gradient實(shí)現(xiàn)的圓是漸變的，圖中是怎么畫(huà)出一個(gè)實(shí)心圓的？這兒就有個(gè)小技巧了：radial-gradient中，我們不僅可以定義漸變兩邊的顏色，還可以定義顏色漸變的距離：
對(duì)比上下兩種漸變，可以明顯地看到，當(dāng)兩種顏色的漸變距離比較遠(yuǎn)時(shí)，漸變過(guò)程比較緩和；而當(dāng)漸變距離很近時(shí)，漸變的過(guò)程就很劇烈。那么，當(dāng)兩個(gè)顏色的漸變距離為0，會(huì)怎么樣？
你會(huì)發(fā)現(xiàn)漸變效果完全消失了。看到這兒應(yīng)該就能明白radial-gradient中，顏色值后面的px含義了：定義了該漸變兩個(gè)顏色的兩個(gè)端點(diǎn)。熊貓的鼻子和嘴就是由黑色和白色的徑向漸變構(gòu)成的，只不過(guò)因?yàn)闈u變距離為0，所以就完全去除了漸變效果。
第二步 耳朵和黑眼圈
現(xiàn)在來(lái)畫(huà)熊貓的耳朵黑眼圈。我們唯一的DIV已經(jīng)作為熊貓臉了，用什么來(lái)充當(dāng)黑眼圈呢？你是否想起了CSS3中的 :before、:after偽元素，偽元素默認(rèn)不可見(jiàn)，但可以用CSS讓它們展示出來(lái)。偽元素的操作方式和普通DIV一樣，所以有了:before、:after偽元素，我們就憑空多出兩個(gè)“DIV”。
沒(méi)錯(cuò)， 我們只要將:before、:after兩個(gè)偽元素展示出來(lái)，加上黑色背景以及圓角，就成熊貓的黑眼圈了：
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);
}
寫(xiě)完代碼后效果如下：
既然偽元素被黑眼圈占用了，就要發(fā)愁熊貓的耳朵如何實(shí)現(xiàn)了。幸好，山窮水復(fù)疑無(wú)路，柳暗花明又一村，你是否又想起了CSS3的box-shadow屬性？
仔細(xì)看黑眼圈和耳朵，會(huì)發(fā)現(xiàn)它們的外形是一致的。恰好可以利用上box-shadow的性質(zhì)：元素陰影的外形根據(jù)元素本身的形狀而定。沒(méi)錯(cuò)兒，兩只耳朵就用它實(shí)現(xiàn)了！
div::before {
/* 接著剛才的代碼 */
box-shadow: 10px -68px 0 -4px #333;
}
div::after {
/* 接著剛才的代碼 */
box-shadow:-10px -68px 0 -4px #333;
}
讓我們停下腳步，看看當(dāng)前的效果：
不錯(cuò)，已經(jīng)初步成型了。如果能看到這里，說(shuō)明你已經(jīng)學(xué)會(huì)了本篇中絕大部分CSS3的知識(shí)。現(xiàn)在就差最后的點(diǎn)睛之筆了！
第三步 眼睛 & 點(diǎn)綴
相比之前使用的技巧，眼睛的畫(huà)法就沒(méi)有什么神奇，依然是運(yùn)用了radial-gradient屬性，前面已經(jīng)介紹過(guò)radial-gradient可以畫(huà)出實(shí)心圓，這里再告訴你它的另外一個(gè)特性：radial-gradient可以互相疊加。于是，就可以實(shí)現(xiàn)熊貓眼睛中的眼白、瞳孔互相疊加的效果了：
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)
}
添加完代碼之后的效果：
最后，再對(duì)圖形做兩個(gè)細(xì)節(jié)上調(diào)整：
- 加厚臉型底部的厚度，增加些“熊樣”
- 在底部增加一些陰影，是圖形具備些立體感
div {
/* 接著之前的代碼 */
border-bottom-width: 10px;
box-shadow: inset 10px -10px 0 #eee;
}
大功告成！
終于，我們用單個(gè)DIV配合CSS3完成了一幅可愛(ài)的熊貓頭像，是不是很有成就感的呢？別急別急，這還僅僅只是一個(gè)熊貓而已，如果你對(duì)單DIV繪制圖形感興趣，可以訪問(wèn)這個(gè)鏈接：
沒(méi)錯(cuò)，這些圖形都是僅用一個(gè)DIV做成的，其中大量地運(yùn)用了border-radius、radial-gradient、box-shadow、:before和:after偽元素這些屬性。本文講解的熊貓頭像，也來(lái)自于這個(gè)網(wǎng)站。
通過(guò)本篇的講解，我們了解到了CSS3的屬性的強(qiáng)大，巧妙運(yùn)用這些屬性，可以達(dá)成許多令人意想不到的效果！:-)
