1、最简单直接的方法（适用于少量引用，一般用于页面分割布局）
<div style="height:1px;background:#cccccc;width:100%;transform: scaleY(.5);"> </div>
高度为1px，进行Y方向缩放，效果就是小于1px的横向直线，如果是宽度为1px，进行X方向缩放，然后再定义高度，效果就是小于1px的纵向直线。
2、高效的方法（适用于列表，对列表上的每条数据进行分割）
css
.testClassItem{
position: relative;
}
.testClassItem:after{
position: absolute;
right: 0;
bottom: 0;
left: 0px;
height: 1px;
content: ‘‘;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #D1D1D1;
}
HTML
//列表页面
<div>
//需要循环展示的列表
<div class="testClassItem">
</div>
<div class="testClassItem">
</div>
</div>
在列表需要循环的div上定义一个class，引用这个class之后在每一条数据下面都会有一条小于1px的细线将数据进行分割。
3、将border的四周边框线都设置成小于1px的细线
将div的内容如字体大小、宽度、高度、padding等都设置成理想状态的2倍，然后通过transform: scale(.5);对div进行统一缩小，这样虽然实现的div四周边框的统一缩放，但是页面会出现很多空白，这个是由于先前设置div宽高统一放大2倍造成的。解决办法就是在这个div外面在套一个div，设置他的宽高为理想状态的尺寸，然后再设置overflow:hidden即可解决;
原文：https://www.cnblogs.com/luo-chen/p/9844935.html