移动端1px边框问题

/*.html文件*/

<div class="border">

<span>1px宽度问题</span>

</div>

/*.css文件*/

.border {

box-sizing: border-box;

width: 200px;

height: 40px;

text-align: center;

position: relative;

}

.border span {

font-size: 14px;

line-height: 40px;

}

.border span:after {

content: "";

position: absolute;

top: 0;

bottom: 0;

left: 0;

right:0;

width: 200%;

height: 200%;

border: 1px solid red;

border-radius: 4px;

color: #d5d5d6;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

/*1px边框的缩放，如果只有left或者right的 则只需要X轴缩放，若是top或者bottom 则是Y轴缩放*/

-webkit-transform: scaleX(0.5) scaleY(0.5); 

transform: scaleX(0.5) scaleY(0.5);

}