利用css巧妙实现分隔线的几种方法

摘要: css 分割线



####style
.demo{
width:600px;
}
.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;

}
.line_02{

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

position:relative;
top:-12px;
background:#fff;
padding:0 20px;
}
.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;
text-align:center;
}
.line_04{
width:600px;

}
.line_04{

overflow:hidden;
_zoom:1;
}
.line_04 b{

background:#ddd;
margin-top:12px;
float:left;
width:26%;
height:1px;
_overflow:hidden;

}
.line_04 span{

padding:0 10px;
width:32%;
float:left;
text-align:center;
}
.line_05{
letter-spacing:-1px;
color:#ddd;
}
.line_05 span{

letter-spacing:0;
color:#222;
margin:0 20px;
}

####html
<div class="demo">
<div class="line_01">
<span>小小分割线 单标实现</span>
</div>
<br>
<br>
<div class="line_02">
<span>小小分隔线 巧用色实现</span>
</div>
<br>
<br>
<div class="line_03">
<b></b>
<span>小小分隔线 inline-block实现</span>
<b></b>
</div>
<br>
<br>
<div class="line_04">
<b></b>
<span>小小分割线 浮动来实现</span>
<b></b>
</div>
<br>
<br>
<div class="line_05">
———————————
<span>小小分割线 字符来实现</span>
———————————
</div>
</div>