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即可解决;