移動端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));
    }
}

利用僞元素（推薦）

// 細邊框
@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}