移动端 1px 边框问题通用解决方案：scss mixin 版本

注意：本方案采用伪元素 + **transform** 的解决方案，在设置边框的元素有交互动作时，请设置子元素定位以及 **z-index** 值。

border.scss

  1. @mixin genBorderRaidus ($radius: null, $ratio: 1) {
  2.   @if ($radius != null) {
  3.     @if (type-of($radius) == list) {
  4.       border-radius: nth($radius, 1)*$ratio nth($radius, 2)*$ratio nth($radius, 3)*$ratio nth($radius, 4)*$ratio;
  5.     } @else {
  6.       border-radius: $radius*$ratio;
  7.     }
  8.   }
  9. }
  11. @mixin genBorderRules ($rule: width, $directions: null, $values: null) {
  12.   // 默认 border-style 为 solid
  13.   @if ($rule == style and $values == null) {
  14.     $values: solid;
  15.   }
  16.   @if ($values != null) {
  17.     // directions 为列表，分别设置 top/right/bottom/left 等位置的样式
  18.     @if (type-of($directions) == list) {
  19.       $dirMap: (
  20.         top: 1,
  21.         right: 2,
  22.         bottom: 3,
  23.         left: 4
  24.       );
  26.       @if (type-of($values) == list) {
  27.         @each $dir in $directions {
  28.           border-#{$dir}-#{$rule}: nth($values, map-get($dirMap, $dir));
  29.         }
  30.       } @else {
  31.         @each $dir in $directions {
  32.           border-#{$dir}-#{$rule}: $values;
  33.         }
  34.       }
  35.     }
  36.     // dierections 为 null，默认为全边框
  37.     @else if ($directions == null) {
  38.       @if (type-of($values) == list) {
  39.         border-#{$rule}: nth($values, 1) nth($values, 2) nth($values, 3) nth($values, 4);
  40.       } @else {
  41.         border-#{$rule}: $values;
  42.       }
  43.     }
  44.     // directions 其余情况为单边设置
  45.     @else {
  46.       @if (type-of($values) == list) {
  47.         border-#{$directions}-#{$rule}: nth($values, 1) nth($values, 2) nth($values, 3) nth($values, 4);
  48.       } @else {
  49.         border-#{$directions}-#{$rule}: $values;
  50.       }
  51.     }
  52.   }
  53. }
  55. @mixin genBorder (
  56.   $directions: null,
  57.   $style: solid,
  58.   $color: null,
  59.   $radius: null,
  60.   $position: after
  61. ) {
  62.   @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
  63.     @include genBorderRules(width, $directions, 1px);
  64.     @include genBorderRules(style, $directions, $style);
  65.     @include genBorderRules(color, $directions, $color);
  66.     @include genBorderRaidus($radius, 1);
  67.   }
  68.   @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
  69.     & {
  70.       position: relative;
  71.       // 移除 border 采用伪类实现
  72.       border: 0;
  73.       border-radius: 0;
  74.     }
  75.     &::#{$position} {
  76.       content: '';
  77.       display: block;
  78.       position: absolute;
  79.       left: 0;
  80.       top: 0;
  81.       width: 200%;
  82.       height: 200%;
  83.       transform-origin: 0 0;
  84.       transform: scale(0.5);
  85.       @include genBorderRules(width, $directions, 1px);
  86.       @include genBorderRules(style, $directions, $style);
  87.       @include genBorderRules(color, $directions, $color);
  88.       @include genBorderRaidus($radius, 2);
  89.     }
  90.   }
  91.   @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
  92.     & {
  93.       position: relative;
  94.       // 移除 border 采用伪类实现
  95.       border: 0;
  96.       border-radius: 0;
  97.     }
  98.     &::#{$position} {
  99.       content: '';
  100.       display: block;
  101.       position: absolute;
  102.       left: 0;
  103.       top: 0;
  104.       width: 300%;
  105.       height: 300%;
  106.       transform-origin: 0 0;
  107.       transform: scale(0.33333);
  108.       @include genBorderRules(width, $directions, 1px);
  109.       @include genBorderRules(style, $directions, $style);
  110.       @include genBorderRules(color, $directions, $color);
  111.       @include genBorderRaidus($radius, 3);
  112.     }
  113.   }
  114. }

测试代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>1px border</title>
  <link rel="stylesheet" href="./index.scss" />
</head>
<body>
  <div class="wrapper">
    <div class="border"></div>
    <div class="border-left"></div>
    <div class="border-left-right"></div>
    <div class="border-top-right"></div>
    <div class="border-top-right-bottom"></div>

    <div class="border-left-right-radius-10"></div>
    <div class="border-tob-bottom-blue-radius-10"></div>
    <div class="border-blue"></div>
    <div class="border-dashed-red"></div>
    <div class="border-red-radius-10"></div>
  </div>
</body>
</html>

css

@import './border.scss';

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  color: orange;

  > * {
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: #f8f8f8;
  }

  .border {
    @include genBorder();
  }
  .border-left {
    @include genBorder(left);
  }
  .border-left-right {
    @include genBorder((left,right));
  }
  .border-top-right {
    @include genBorder((top,right));
  }
  .border-top-right-bottom {
    @include genBorder((top,right,bottom))
  }

  .border-left-right-radius-10 {
    @include genBorder((left,right), solid, null, 10px)
  }
  .border-tob-bottom-blue-radius-10 {
    @include genBorder((top,bottom), solid, blue, 10px)
  }
  .border-blue {
    @include genBorder(null, solid, blue);
  }
  .border-dashed-red {
    @include genBorder(null, dashed, red);
  }
  .border-red-radius-10 {
    @include genBorder(null, solid, red, 10px);
  }
}