移动端实现0.5px边线

原理上是通过css3的缩放实现，注意要加边线的元素要设置relative定位。
1.单独方向上的边线

.bd-t{
  position:relative;
}

.bd-t:after{
  content: "  ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border-top:1px solid #e0e0e0; 
  -webkit-transform: scaleY(.5);
  transform:scaleY(.5);
}

2.全包围的border边线。

 


  .bd-all{
      position:relative;
  }

 .bd-all:after{
      content: "  ";
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height:200%;
      box-sizing: border-box;
      border:1px solid #e0e0e0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scale(.5, .5);
      transform: scale(.5, .5);
 }