CSS巧妙实现分隔线的几种方法

一样看了新浪，但是结果就不一样，我就没有那个嗅觉去做一下，去看看它是如何实现的，什么时候才能成为本能思考呢？

下面这是转载的：http://www.daqianduan.com/css-a-line/，补充一下：因为下面都没有html结构，还有他的效果我也没有能看到（点击查看实例展示没有看到效果），所以我 自己根据理解补了一下，如果要是有什么不对的话，还请大家指正。

单个标签实现分隔线：

 <div class="demo_line_01"></div>

1 .demo_line_01{
2     padding: 0 20px 0;
3     margin: 20px 0;
4     line-height: 1px;
5     border-left: 200px solid #ddd;
6     border-right: 200px solid #ddd;
7     text-align: center;
8 }

效果是这样的：

特点是简洁，但是不能多行，因为文本多了会直接盖在线上，效果如这样：

巧用背景色实现分隔线：

<div class="demo_line_02"><span>look</div>

 1 .demo_line_02{
 2     height: 1px;
 3     border-top: 1px solid #ddd;
 4     text-align: center;
 5 }
 6 .demo_line_02 span{
 7     position: relative;
 8     top: -8px;
 9     background: #fff;
10     padding: 0 20px;
11 }

效果是这样的：

特点是代码简洁，可自适应宽度，效果这样：

 

我自己做的，背景色没有取好，所以感觉像个补丁，但是原理我想大家是明白的，就是用背景色块去遮挡文本背后的横线

inline-block实现分隔线：

<div class="demo_line_03"><b></b><span>asdgag<span></div>，这个出来是单个分割线，不知道是不是应该是这样的，还望指正

 1 .demo_line_03{
 2     width:600px;
 3 }
 4 .demo_line_03 b{
 5     background: #ddd;
 6     margin-top: 4px;
 7     display: inline-block;
 8     width: 180px;
 9     height: 1px;
10     _overflow: hidden;
11     vertical-align: middle;
12 }
13 .demo_line_03 span{
14     display: inline-block;
15     width: 220px;
16     vertical-align: middle;
17 }

效果如下：

特点：文字可多行,我是直接复制的span，效果是这样的：

浮动实现分隔线：

 <div class="demo_line_04"><b></b>hdfghdfghdhsdfgsfgsgsdfgsdfg</div>

 1 .demo_line_04{
 2     width:600px;
 3 }
 4 .demo_line_04{
 5     overflow: hidden;
 6     _zoom: 1;
 7 }
 8 .demo_line_04 b{
 9     background: #ddd;
10     margin-top: 8px;
11     float: left;
12     width: 26%;
13     height: 1px;
14     _overflow: hidden;
15 }

 效果是这样的：

利用字符实现分隔线：

<div class="demo_line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>

1 .demo_line_05{
2     letter-spacing: -1px;
3     color: #ddd;
4 }
5 .demo_line_05 span{
6     letter-spacing: 0;
7     color: #222;
8     margin:0 20px;
9 }

效果这样：

这样以后需要就可以偷个小懒，过来复制咯，呵呵