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 }

效果这样：

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