1、最简单直接的方法(适用于少量引用,一般用于页面分割布局)

<div style="height:1px;background:#cccccc;width:100%;transform: scaleY(.5);">&nbsp;</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即可解决;