移动端 1px 边框推荐解决方案

[SoloJiang]

日常开发中，开发者经常会遇到需要绘制 1px 边框的诉求，由于 Rax App 提供了 rpx 能力，同时为了避免 1px 边框过粗，一般来说符合直觉的写法是：

.box {
  border: 1rpx solid #ddd;
}

但由于移动端不同机型的绘制逻辑不一样，会在某些机型上出现 1rpx 边框消失的问题，所以如下给出移动端通过伪元素绘制 1px 边框最佳实践：

.box {
  position: relative;
  &:after {
     content: " ";
     position: absolute;
     top: 0;
     left: 0;
     width: 200%;
     height: 200%;
     transform: scale(0.5);
     transform-origin: left top;
     box-sizing: border-box;
     border: 1px solid #ddd;
  }
}