移动端1px的边框是非常常见的效果,在各种app或者网页上大量用到,比如微信和qq的联系人列表等.然而,当我们用css直接写border:1px 的时候,在pc端都是正常的,但是在一些高分屏上,比如iPhone上,我们会发现,写的是1px,结果看到的是2px.这也是为什么我们在做移动端的时候,设计师都是给我们的设计稿是750px或者640px的,而我们实际对应的iphone6,iphone5的屏幕是375px和320px,以及为什么我们现在切图的时候需要用到@2x和@3x图的原因.这个原因在这里不详述,可以参考张鑫旭前辈的文章http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
　　通过上面的了解,我们知道了,在iPhone6这样的屏幕上,我们写1px,实际对应的是2px,而如果设计稿上就是1px,那么我们在iPhone手机上就需要显示的是0.5px,然而这个在老版本的iPhone上是不可以的,安卓手机上也是不可以的,因为屏幕最小单位就是1px,不能出现0.5px这样奇葩的单位.直接不能写0.5px,我们可以换一种方式进行,这里采用css3的属性,对1px边框进行缩放,缩小0.5倍,那么就从1px变成0.5px了
　　这里使用了stylus预处理器,

    $border-1px {
      box-sizing: border-box
      position: absolute
      content: '';
      left: 0
      top: 0
      width: 200%
      height: 200%
      transform-origin: left top
      transform: scale(0.5)
    }
    //  全边框,可以加圆角
    border-1px($color, $radius = 0) {
      position: relative
      &:before {
        border: 1px solid $color
        border-radius: $radius
        @extend $border-1px
      }
    }
    // 上边框
    border-1px-t($color) {
      position: relative
      &:before {
        border-top: 1px solid $color
        @extend $border-1px
      }
    }
    // 下边框
    border-1px-b($color) {
      position: relative
      &:after {
        border-bottom: 1px solid $color
        @extend $border-1px
      }
    }
    // 上下边框
    border-1px-tb($color) {
      position: relative
      &:after {
        border-top: 1px solid $color
        border-bottom: 1px solid $color
        @extend $border-1px
      }
    }
    // 左边框
    border-1px-l($color) {
      position: relative
      &:before {
        border-left: 1px solid $color
        @extend $border-1px
      }
    }
    // 右边框
    border-1px-r($color) {
      position: relative
      &:after {
        border-right: 1px solid $color;
        @extend $border-1px
      }
    }

如果会使用stylus预处理器,那么可以直接使用以上的mixin,如下:

.app{
  width: 200px
  height: 200px
  background: #888;
  border-radius: 50%
  border-1px(#f00,50%)
}

这样就实现了一个全边框都是0.5px,而且还是圆角