设置border线条小于1px

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/c_xiaomaotou/article/details/81634072

       正常来说,border的最小宽度为1px,这种情况对于移动端来说是一个很大的问题,因为1px在手机显示确实显得有点粗;对于iOS系统它支持浮点数,可以使用rpx作为单位,可设置为1rpx,相当于0.5px,而安卓就不行了,下面说一下安卓设置细下边框

       对于安卓需要使用到伪元素,只需要把该伪元素添加到你想要的元素中就可以了,比如:

<div class="text">
    hello world!
</div>

.text{
    position:relative;
}
.text:after{
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    left: 0;
    z-index: 2;
}

这样就可以让div的下边框看起来很细了

注意:text一定要加position属性