CSS 绝对定位与相对定位

前几天遇到了上班的第一个难题，项目想要实现这样的效果：

一开始我天真地以为只要设置边框加上圆圈的图片就可以了，然而按这种方法实际上实现的效果是这样的：

实际效果比视觉图上下多了两截。。。

但是，聪明如我怎么可以在我的第一个页面上屈服呢！于是在光明正大地看了其他网站类似效果的源码之后，我也get到了这个技能！

原来这里是用到障眼法，分别画出两个细成一条线的div，分别为.border-first和.border-last。（这里需要了解绝对定位和相对定位）

然后调整这两条线（两个div）到合适的位置，这里为了方便观察，线条设置为红色，效果是这样的：

最后，只要将线条设置为白色就大功告成咯~

如果觉得黑色圈圈很丑也可以用图片替换，再改改文字样式就perfect了~

代码演示在这里：https://jsfiddle.net/chenjunxia/8bmLz95n/

在该过程中参考的资料有：

http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html

http://blog.sina.com.cn/s/blog_93a6a0c30101fshd.html