CSS3绘图实战-某团队标志

CSS教程3-Box-shadow阴影效果用法趣味讲解
随着技术的发展，代码在不断的进步，进而替代一些图片所能实现的效果，其中CSS教程3属性中“Box-shadow”表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。一、基本用法：

此篇文章具体介绍如下

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

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

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

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

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

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

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

<div class="center">
<div class="box1 color2">
<div class="box1_1 color1"></div>
</div>
<div class="box2"></div>
</div>

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

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

<div class="bottom">
<div class="box1 color5">
<div class="box2 color4">
<div class="box3 color3"></div>
</div>
</div>
</div>

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

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

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