css实现手机上超细边框的方法

直接上代码

.border-t,.border-b,.border-l,.border-r{position: relative;}
.border-t:before{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    color: #E5E5E5;
    border-top: 1px solid #E5E5E5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}


.border-b:after{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    color: #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}


.border-l:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    color: #E5E5E5;
    border-left: 1px solid #E5E5E5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

.border-r:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    color: #E5E5E5;
    border-right: 1px solid #E5E5E5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

以上CSS本来是公共属性写一些，border与其他的是分开写的，但貌似一些机型上出了问题，本来公共属性可以定义两组，但还是分开写了。