移动端实现解决一像素边框问题

对于移动端总有要一像素边框的需求，我尝试过以下方法：

1、直接用1px，在移动端显示会比原型粗，不符合要求；

2、直接用0.5px，不支持小于1px的写法，不符合要求；

3、用rem当单位，我使用0.05rem作为1px的边，但是在部分机型适配上不完美，会显示不完整；

4、使用伪类，目前为止，比较实用的方法，如下

对于单侧边，如下边线：

.border-bottom{
    position:relative;
}

.border-bottom:after{
    content:"";position:absolute;
    bottom:0;
    left:0;
    right:0;
    border-top:1px solid #000;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

对于按钮或其他类似的四边框：

.border{
    position:relative;
    border:0;
}
.border:after{content:'';
    position:absolute;
    left:0;
    top:0;
    border:1px solid #000;
    width:200%;
    height:200%;
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
    -webkit-transform-origin:left top;
    transform-origin:left top;
}