最近正发愁着毕业设计做些什么，而后闲逛时看到了诸如twitter小鸟、哆啦A梦、灰太狼等纯CSS3实现的图像。于是本着初学的心态，挑了喜欢的卡通形象来解闷。
于是花了一个晚上做完，现在想来多少有点遗憾。因为当时没有分段做个记录，要不现在就能搞个更详细的制作过程给各位了。
综上，这篇博文主要用来分享用CSS3绘图的心得及所需的技术。
不知道园里有朋友看过《夏目友人帐》没，不然很难向您解释我为什么喜欢这只大肥猫……
演示地址：http://dewey.sinaapp.com/maomi/
就不提供打包下载了，源码未压缩，需要的朋友请右键另存。源码采用MIT，博文的转载请保留作者和出处。
废话了那么多，我们来看下实际效果吧(以下为参考截图)：
|
|
文艺版：在Chrome 18、Safari 5.1中展示正常，且有动画（注意那个泡泡）； 测试了Firefox 10/11、IE 10/9，均能正常显示，但无动画（动画部分使用了webkit） |
|
|
无奈版：在Opera11下的效果…… 请注意那个钢韧的背部曲线！我会在下文中做出解释的 |
|
|
神兽版：IE8下的显示效果，果然霸气侧漏…… 我这儿还真没找来IE6测试，要不还有更奇葩的呢 |
实现思路：
在美术基础上对图像进行粗略划分，每个部分划为一div。对该div内部元素进行同样的操作，直至不能再划分。这样做只是为了定位方便，虽然方法有很多，但如果你在后期要调整头和身体相对位置的话，这样更方便点。然后用CSS3的属性把div调整到你想要的形状，上色，发布，然后告诉别人，你的浏览器该升级了。
所用工具：
Vim和Chrome（当然你没准儿还需有别的浏览器来测试兼容性），这条很无聊，毕竟各有所好。写在这里，主要想说明下调试技巧。方法火星了，仅供和我一样的菜鸟参考。利用Chrome万能的F12，如果你要改变某一元素的值，只用在element--“元素”标签页下找到相关项，鼠标双击即可进行修改。技巧在于，如果你在数值上按下“上/下方向键”，那么相应的值就会随之增大/减小。这在调整形状或是改变角度时显得尤其好用。因为你能看到一个线性的变化过程，而且你能决定何时停下来;)Safari的开发人员工具和FireBug也能提供同样的操作。
代码概述：
最大的一个div类名为nyancosensei，是日文“ニャンコ先生（猫咪老师）”的罗马音。身体各部分的命名均有相应的英文来标识，这在代码中多有体现，不再赘述。倒是想借这个机会请教下，不知道在我的代码里，某些类的前缀是不是有点啰嗦了呢？请问有文件体积与解析效率双赢的写法吗？求教。
用到的CSS3属性：
*：以代码中的出现顺序为序
**：浏览器都搞出了前缀的名堂，除了让人多写一行基本一样的东西外，基本也没别的用了（这种说法不准确的，但请让我发泄一下吧）……所以下文中的代码示例均用xxx代替"webkit(Chrome,Safari用)","moz(Firefox用)","ms(IE用)","o(Opear用)"
***：考虑到本文的性质，不打算对相应的属性进行过多的描述了，仅针对本例进行解释。毕竟不少园友都贡献过相关的知识了，而且我们还有Google。
::CSS3线性渐变::
-xxx-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
- 第一个参数是渐变的起始点，本例中用了"top"，实现了背景色自上而下的变化。可选参数还有"bottom","left","right"等，而且你还可以用百分数
- 后两个参数代指渐变的起止色
- 值得一提的是，WebKit更新了语法，兼容Mozilla，要不然我也不会用xxx来代替了
::CSS3变形::
-xxx-transform : none | <transform-function> [ <transform-function> ]*
or:
-xxx-transform : rotate | scale | skew | translate |matrix;
- 本例中使用了rotate--"旋转"，内部是一个表示倾斜角度的参数，正负皆可
- 头部及不少细小部分（如花斑、嘴巴等）都利用它来实现旋转
::CSS3圆角::
border-radius : none | <length>{1,4} [ / <length>{1,4} ]?
- 圆角的新闻应该满世界都是了吧……不过还是有些东西值得分享下。平时用这个属性来绘制圆角区域，一般都扔进1~4个值，分别按照top-left、top-right、bottom-right、bottom-left的顺序来设置。如果仅仅这样的话，你会看到猫咪的脸不是一张大饼的话，就是麻将牌。所以在此加入了可选的参数“/”。根据规定“/”前的值设定该角水平方向的半径，其后的值设定垂直方向的半径
- 本例中多处使用了该属性（毕竟是画图嘛，而且我只用了两种图形，另外一个在下一节介绍），但是上面讲的应该不很直观，建议用上文提及调试方法对源码进行更改，丰衣足食
::CSS3阴影::
box-shadow: <length> <length> <length> <color>
- 四个值分别代表了 阴影离开文字的横向距离，阴影离开文字的纵向距离， 阴影的模糊半径 和 阴影的颜色
- 猫咪腹部的阴影由此而来
非CSS3新增的属性：
::三角形::
.nyancosensei .head .ear{ width: 0; height: 0; border-left: 70px solid transparent; border-right: 28px solid transparent; border-bottom: 89px solid #FFFFFF; }
- 以上就是绘制猫咪耳朵的代码了，算是简单的css小技巧，我也是通过园里一博友的文章学到的（抱歉，没记下链接）
- 大家应该注意到，猫咪身上没有描边的只有耳朵了。其实，这是因为边线的颜色是白的，而这儿并没有设定背景色。
::关于遮盖::
- 我们再来回看下Opera中的悲情展示——威武的断背……其他浏览器中表现正常，所以这应该是O厂的一个bug——我很想这样说，但其实别的浏览器的处理也不尽人意
- 关于圆角的遮挡，说的准确点是：用外部圆角的div遮挡内部div超出边界的内容，怎么办？overflow:hidden？至少一开始我这样做是不行的。在WebKit解析中，如果外层div的position:absolute;那么内部元素所对应的外层边界就是外层div的原始长宽，也就是那个矩形。所以就出现了那让人无语的断背……
- 有一点值得明确下，overflow:hidden是有效的，但解析的bug在于对外层边界的判断
- 看源码大家应该都知道了，为了解决这个矛盾，我把.body的position设为static，然后WebKit就神奇般的正常了……由于当时没有测试FF和IE，不知道这是不是浏览器对CSS3解析的通病。但Opera这边，我就真没办法了
- 猫咪头部的斑纹我用了另一种方式来处理：让内部元素的边框和外部的曲线一致，这样就不会挡着外边的了-_-||说着都感觉别扭。哪位朋友有更好的办法和想法的，请一定教教我
::关于长宽的百分比::
- 也许您注意到，源码中凡是牵扯到长宽的，我都用具体数值。之前尝试过百分数，但都被移除了。原因是在我的Android 2.3.6手机上，用原生浏览器查看的话，持有该值的元素不能显示圆角。
WebKit动画：
.nyancosensei .bubble { -webkit-animation: 'puff' 2.5s linear infinite; } @-webkit-keyframes puff { 0% { width: 70px; height: 70px; margin: 100px 0 0 20px; } 22% { width: 90px; height: 90px; margin: 50px 0 0 20px; } 40% { width: 100px; height: 100px; margin: 20px 0 0 20px; } 70% { width: 90px; height: 90px; margin: 50px 0 0 20px; } 100% { width: 70px; height: 70px; margin: 100px 0 0 20px; } }
- 我在这儿直接贴源码了……貌似这样说方便点
- 第一个参数指定了keyframes的名字puff，在下文中有对其的定义
- 第二个参数指定了在多长时间内完成动画，本例中是2.5秒
- 第三个参数指定了动画了播放方式，有 “ease” “linear” “ease-in” “ease-out” “ease-in-out”几个值可选，这里选用了linear方式，使得帧与帧之间过度得较为平化
- 最后一个参数指定动画循环的次数，infinite即为无限次，默认是1
- 以上只是设定了动画的执行方式，具体关键帧的定义在@-webkit-keyframes 中。百分数表示了关键帧相对播放进度的位置，通过在不同关键帧间的线性切换，动画就有了
总结：
纯CSS3的图像绘制起来不难，但制作方法有点太过原始了，要用来代替图像还不现实。倒是在移动设备中，由于压缩文件体积理论上小于同分辨率的图片，我倒是乐于那它来做些WebApp的loading图或logo;)
开博的第一篇，不知道怎样写才算合适，请各位多多指教啦。