<div class="line_01">小小分隔线 单标签实现</div>
.demo_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
<div class="line_02"><span>小小分隔线 巧用色实现</span></div>
.demo_line_02{height: 1px
border-top: 1px solid #ddd
text-align: center
}
.demo_line_02 span{
position: relative
top: -8px
background: #fff
padding: 0 20px
}
<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>
.demo_line_03{width:600px
}
.demo_line_03 b{
background: #ddd
margin-top: 4px
display: inline-block
width: 180px
height: 1px
_overflow: hidden
vertical-align: middle
}
.demo_line_03 span{
display: inline-block
width: 220px
vertical-align: middle
}
你要的各种分割线都在这<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="content-type" content="text/htmlcharset=utf-8" />
<title>css各种分割线</title>
<style>
body
{
text-align:center
}
.split-line1
{
border-top:solid 1px #999
width:100%
padding:20px 0px
margin-top:20px
}
.split-line2
{
border-top:dashed 1px #999
width:100%
padding:20px 0px
margin-top:20px
}
.split-line3
{
border-top:dotted 1px #999
width:100%
padding:20px 0px
margin-top:20px
}
.split-line4
{
border-top:double 6px #999
width:100%
padding:20px 0px
margin-top:20px
}
</style>
</head>
<body>
第一部分内容
<div class="split-line1">
实线分割线
</div>
<div class="split-line2">
虚线分割线
</div>
<div class="split-line3">
点状分割线
</div>
<div class="split-line4">
双线分割线
</div>
</body>
</html>
