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 }

效果这样：



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