利用CSS巧妙实现分隔线

1、方法一：利用单个标签

优点：代码简洁

.line_01{    padding: 0 20px 0;    margin: 20px 0;    line-height: 1px;    border-left: 200px solid #ddd;    border-right: 200px solid #ddd;    text-align: center;}

2、方法二：巧用背景色       

优点：代码简洁，可自适应宽度

.line_02{    height: 1px;    border-top: 1px solid #ddd;    text-align: center;} 

.line_02 span{    position: relative;    top: -8px;    background: #fff;    padding: 0 20px;}

3、方法三: 妙用inline-block

优点：文字可多行

.line_03{    width:600px;} 

.line_03 b{    background: #ddd;    margin-top: 4px;    display: inline-block;    width: 180px;    height: 1px;    _overflow: hidden;    vertical-align: middle;}

 .line_03 span{    display: inline-block;    width: 220px;    vertical-align: middle;}

4、方法四：利用浮动

.line_04{    width:600px;}.demo_line_04{    overflow: hidden;    _zoom: 1;}.line_04 b{    background: #ddd;    margin-top: 8px;    float: left;    width: 26%;    height: 1px;    _overflow: hidden;}

5、方法五：用字符

优点：代码简洁 

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

.line_05{    letter-spacing: -1px;    color: #ddd;}

 .line_05 span{    letter-spacing: 0;    color: #222;    margin:0 20px;}