其实网上对于制作五环有过例子，但是那些例子写的比较晦涩 而且注解不容易看懂，原理跟我的稍微有些差别
我做了简化，代码量偏少。
用了CSS3 的:after伪类
实质上我感觉:after用在这里并不好用
原因有：
1. jquery无法选择这个伪类，比如$(".round:after")没法选择得到东西
2. jquery无法选择的话，对于这个伪类的操作就不容易实现，比如动态调整css等，只能绕弯路（给head append一个<style>）
3. 在chrome开发工具里 看不到这个伪类 ，实质上没有把它当做一个元素处理。
所以:before 和 :after 其实还是尽量少用，只在简单排版里用。
尽管如此，还是跟很多范例一样，用了:after。
五环制作原理如下
1.五个并列的圆，不设置任何index
2.五个圆和别的圆重叠交叉的部分，预留缺口，border-right-color:transparent
3.用:after制作一个新元素 填补这个缺口，灵活调整这个缺口的z-index来实现交叠
演示效果如下，也可以猛击这里：http://jsfiddle.net/crabyan/6tg5Z/
这个version是缺口做成另外颜色的，比较容易理解思路：http://jsfiddle.net/crabyan/6tg5Z/41/