//1px边框的解决方案
@mixin borderCreator($name, $direction, $type, $color) {
  .border-#{$name} {
    @if $direction!= "" {
      border-#{$direction}: 1px $type $color;
    } @else {
      border: 1px $type $color;
    }
  }

  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-#{$name} {
      @if $direction!= "" {
        border-#{$direction}: 0.5px $type $color;
      } @else {
        border: 0.5px $type $color;
      }
    }
  }
  @media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-#{$name} {
      @if $direction!= "" {
        border-#{$direction}: 0.333333px $type $color;
      } @else {
        border: 0.333333px $type $color;
      }
    }
  }
}

@include borderCreator("box", "", solid, #0000002f);
@include borderCreator("right", "right", solid, #0000002f);
@include borderCreator("top", "top", solid, #0000002f);
@include borderCreator("bottom", "bottom", solid, #0000002f);
@include borderCreator("left", "left", solid, #0000002f);