移动端1px边框问题解决

使用小数点（兼容不好）

目前只有ios8以上已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

background渐变（不利于扩展）

// 上边框
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .ui-border-t {
        background-position: left top;
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0));
    }
}

css3的clip-path属性（目前有些浏览器还未兼容）

.half-line {
  background-color: red;
  height: 1px;
  line-height: 1px;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

利用伪元素（推荐）

// 细边框
@mixin border($a:false, $b:false) {
  @if $a {
    border-#{$a}: 1px solid $text-border;
  } @else {
    border: 1px solid $text-border;
  }
  @if $b {
    border-#{$b}: 1px solid $text-border;
  }
}
@mixin border-after-a {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  width: 200%;
  height: 200%;
  // box-sizing: border-box;
  transform: scale(0.5, 0.5);
  transform-origin: left top;
}
.bt, .bb, .bl, .br, .btb, .blr, .ba {
  position: relative;
  border: none;
  z-index: 2; // 解决popup弹出框内的边框z轴问题
  &::after {
    @include border-after-a;
  }
}
// 上边框
.bt:after {@include border('top')}
// 下边框
.bb:after {@include border('bottom')}
// 左边框
.bl:after {@include border('left')}
// 右边框
.br:after {@include border('right')}
// 上下边框
.btb:after {@include border('top', 'bottom')}
// 左右边框
.blr:after {@include border('left', 'right')}
// 上下左右边框
.ba:after {@include border}