今天要给大家展示的是如何绘制一个熊猫头像，就是这个
如果这是用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 || <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叫简单？！不懂的还以为是乱码。。。请你把菜刀再放一放再听我说，虽然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的属性的强大，巧妙运用这些属性，可以达成许多令人意想不到的效果！:-)
网友评论