关于移动端真正1px边框

.hairline li{

    position: relative;

    border: none;

}

.hairline li::after{

    content: '';

    box-sizing: border-box;

    width: 200%;

    height: 200%;

    top: 0;

    left: 0;

    position: absolute;

    border: 1px solid #000;

    -webkit-transform: scale(0.5);

    transform: scale(0.5);

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

}

.xiLineBottom{position:relative;}

.xiLineBottom:before{content:'';

    position: absolute;

    bottom: -1px;

left:0;

    background: #bfbfbf;

    width: 100%;

    height: 1px;

    -webkit-transform:scaleY(0.4);

            transform:scaleY(0.4);

    -webkit-transform-origin: 0 0;

            transform-origin: 0 0;

}

.xiLineTop{position:relative;}

.xiLineTop:after{content:'';

    position: absolute;

    top: 0;

left:0;

    background: #bfbfbf;

    width: 100%;

    height: 1px;

visibility:initial;

    -webkit-transform: scaleY(0.4);

            transform: scaleY(0.4);

    -webkit-transform-origin: 0 0;

            transform-origin: 0 0;

}

.xiLineRight{position:relative;}

.xiLineRight:before{content:'';

    position: absolute;

right:0;

top:0;

bottom:0;

    background: #bfbfbf;

    height: 100%;

    width: 1px;

    -webkit-transform: scaleX(0.4);

            transform: scaleX(0.4);

    -webkit-transform-origin: 0 0;

            transform-origin: 0 0;

}

.xiLineLeft{position:relative;}

.xiLineLeft:before{content:'';

    position: absolute;

left:0;

top:0;

bottom:0;

    background: #bfbfbf;

    height:100%;

    width: 1px;

    -webkit-transform: scaleX(0.4);

            transform: scaleX(0.4);

    -webkit-transform-origin: 0 0;

            transform-origin: 0 0;

}