border-image:border-image-source slice-width{1,4}
slice-width的值可以是具体像素，也可以是百分比。切割后的图片块分别是
border-top-left-image border-top-image border-top-right-image
border-left-image border-right-image
border-bottom-left-image border-bottom-image border-bottom-right-image
其中，border-top-image和border-bottom-image区域受到水平方向效果影响，如果是repeat则此区域图片会水平重复，如果是round则会水平平铺，责任stretch则被水平拉升。而我们设置虚线，则选择repeat/round都可以。
css中写border-bottom:1px dashed #ccc
dashed 虚线
solid 实线
dotted 点
<style>.c{float:leftwidth:200px}
li{float:leftwidth:200pxheight:30pxline-height:30pxborder-bottom:1px dashed #ccc}
</style>
<div class="c">
<ul>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
</ul>
</div>
你要的各种分割线都在这<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>
