怎样用一个DIV绘制熊猫头像

今天要给大家展示的是如何绘制一个熊猫头像，就是这个

如果这是用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的径向渐变