CSS3绘图实战-某团队标志

css每一代都会有革命性的更新，尽管目前还有一部分浏览器没有支持CSS3，就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋，一些早期不敢想象的东西，如今都可以用CSS来实现，比如，变型，渐变，动画等等。

这次我就拿CSS3的一些新功能来画出团队的标志，实物如下图：

不说废话，直接开始。这个logo整体来说可以分为几个色块，几个不规则的形状体拼接而成。但是CSS不是HTML5，不是canvs也不是SVG，他是无法实现复杂路径绘图的，但是CSS有他独特的绘图方式，border-rasius，transform，z-index，overflow。

说白了就是通过各种圆角，变形旋转，互相遮盖，互相切割来完成。

首先是Nut的果蒂部分，这里的结构如下

原理非常简单，一个深色的圆角矩形，上面盖一个浅色的椭圆，然后用两个白色的形状进行遮盖。webkit与moz显示正常。（IE,IE是什么？等IE10吧！）

然后是Nut上面的那个托，代码如下：

用center标签先进行定位，然后两个box互相遮盖。

到目前来说，webkit跟moz核心的浏览器还是都表现正常的。但是在写下面果实主体部分的时候，遇到了webkit不兼容的状况，结构如下：

分别用webkit与moz两个浏览器运行，就出现了较大的区别。去查手册与官方资料，都没有任何说明。在我多次测试之后，发现是css3的圆角形状，在经过transform处理之后，overflow属性hidden值的表现会出现不兼容，moz核心下正常，在webkit核心的浏览器下，hidden的区域始终是方块形状，无视圆角。

我不知道这应该被算做CSS3的缺陷，还是要被算做浏览器的bug，opera下的表现更差，border-radius和overflow：hidden直接不能配合使用。

也许下一代的CSS会解决，也许下一代的浏览器会解决，这些都不重要了，重要的是，把现有的知识都掌握。