第一个使用的是border为虚线，再加上box-shadow来模拟外面的框；第二个使用的:before方法生成一个虚线框，这里注意的是生成的内容定位上下左右各为3px，确定了这个生成内容的大小,另外需要注意的是注意before内容的层级，小心覆盖了你里面的内容，你可以设置background为一个颜色，就知道层级了；第三个是使用的是border和outline方法。outline不支持单边设置，也不支持圆角，所以比起border来outline很是不足啊。

其实分析每个css3的案例动画，首先做的应该是先把动画停下来，了解下初始是怎么样的。如这个我们一开始看到这么绚的动画加载效果，一般都认为比较难，但是先把animation这个属性通过firebug禁用后，发现原来原理并不是很复杂，只是运用了border，border-radius和box-shadow，然后给就是rotate的animation。第二个和第一个原理一样，只是设置的border-color四个值不一样罢了。而第三个则是使用不同的延迟时间引发scale的动画。至于暂停按钮则是通过js来添加stop这个class，stop则设置了animation-play-state:paused;

这三个案例实际上就是用了两种技术，一个是radio来控制，一个是checkbox来控制，用radio表示只有一个可以展开（radio的只有一个是选中状态），而checkbox则表示可以同时展开多个（checkbox可以多个选中）。其实道理都是一样的，对radio或者checkbox的选中状态进行判断，然后决定其下面的兄弟元素的高度。

今天在365psd上看到一个psd效果，很有意思，想着能不能转成web页面，这问题想得太SB了，然后接着想，转成带有css3的动画效果。那转成什么呢？思来想去做了一个全屏背景图的幻灯片效果。虽然是一个简单的demo，但里面集合了CSS3众多属性，从伪结构选择器，到圆角，阴影以及动画等。

本实例的tabs斜角效果跟border没有一毛钱关系了，呵呵也跟:before和:after没有关系，却是运用了渐变背景制作的。给了一个角度的渐变，由transparent到红色的220度渐变。然后设置了一个box-shadow的左右偏移为负，使右侧看起来颜色比较深。

这是第三个tabs的标题设计了，这次应用的又跟上两个不是一样的技术。这里用了:after来生成了，然后对生成的内容水平方向上扭曲skewX来达到斜切的效果。当然li的margin距离要刚好等于生成a:after生成内容的宽度。然后就是注意box-shadow了。注意火狐14.0更新后，skew得写成skewX或skewY分别表示水平方向和竖直方向偏移，这里它的demo用的是skew，所以火狐下并没有斜切的效果，我们可以firebug手动添加。

本实例的思路和之前说的用radio来控制手风琴效果有异曲同工之效。主要应用radio单选按钮来确认状态，然后对这个状态下的兄弟元素进行css控制。当然这里不比手风琴有几个radio就有几个内容，这里是一个内容，所以所有的radio应该和这个内容是兄弟元素，以便使用兄弟元素选择器~。然后对各个状态下的内容进行css控制，或显示或隐藏或浮动等。

收集了很多DEMO和相关的PSD,于是想能不能通过自己学的CSS3相关技巧，将有关PSD图效果转换成CSS3效果。灵光的冲动，让我开始做起了这件事情，今天开始我会开始制作一些CSS3的DEMO效果，而这些DEMO效果都是由对应的PSD转换过来的，换句话说，如果你不考虑兼容IE低版本的话，这些DEMO你都可以使用。那我们开始吧

本实例纯css3打造，因为没有获取当前时间，所以初始化时间为12点，打开即开始走动。圆盘使用border-radius做成，然后一个:before生成中间的圆点，一个:after生成倒影。至于三个指针就是关键了，其高度及宽度不等，绝对定位于中间的同一圆点，然后以这点为坐标旋转，旋转使用动画一样，只是旋转一周的持续时间不一样，秒针为60s，分针为3600s，时钟为84600s。