移动端1px边框完美解决办法

1. 移动端1px边框在手机上看比较粗，参照京东web端的做法，结合伪类after，如图：

2. 解决办法

<div class="box">我是一段文字</div>
.box{ 
   position: relative;
   .border-bottom-1px(#333); //调用下边框
}

/* 下边框 */
.border-bottom-1px(@color: #eee) {
 &:after {
   content: "  ";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 1px;
   border-bottom: 1px solid @color;
   -webkit-transform-origin: left bottom;
   transform-origin: left bottom;
   -webkit-transform: scale(1, 0.5);
   transform: scale(1, 0.5);
 }
}
/* 上边框 */
.border-top-1px(@color: #eee) {
 &:after {
   content: "  ";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 1px;
   border-top: 1px solid @color;
   -webkit-transform-origin: left top;
   transform-origin: left top;
   -webkit-transform: scale(1, 0.5);
   transform: scale(1, 0.5);
 }
}
/* 左边框 */
.border-left-1px(@color: #eee) {
 &:after {
   content: "  ";
   position: absolute;
   left: 0;
   top: 0;
   width: 5px;
   height: 100%;
   border-left: 1px solid @color;
   -webkit-transform-origin: left top;
   transform-origin: left top;
   -webkit-transform: scale(0.5, 1);
   transform: scale(0.5, 1);
 }
}
/* 右边框 */
.border-right-1px(@color: #eee) {
 &:after {
   content: "  ";
   position: absolute;
   right: 0;
   top: 0;
   width: 5px;
   height: 100%;
   border-right: 1px solid @color;
   -webkit-transform-origin: right top;
   transform-origin: right top;
   -webkit-transform: scale(0.5, 1);
   transform: scale(0.5, 1);
 }
}
/* 四边框 */
.border-1px(@radius: 0px, @color: #eee) {
 &:after {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 200%;
   height: 200%;
   border: 1px solid @color;
   -webkit-transform-origin: 0 0;
   -moz-transform-origin: 0 0;
   -ms-transform-origin: 0 0;
   -o-transform-origin: 0 0;
   transform-origin: 0 0;
   -webkit-transform: scale(0.5, 0.5);
   -ms-transform: scale(0.5, 0.5);
   -o-transform: scale(0.5, 0.5);
   transform: scale(0.5, 0.5);
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border-radius: @radius;
 }
}

可完美解决，但是比较繁琐。