TIP

1像素边框实现方案

postcss-write-svg

WARNING

无法解决圆角边框

// vue.config.js 配置
postcss: {
        plugins: (loader) => [
          require('postcss-write-svg')({ utf8: false })
      ]
}

// common.scss
@svg 1px-border {
  height: 2PX;
  @rect {
      fill: var(--color, black);
      width: 100%;
      height: 50%;
  }
}
// 使用
  border-bottom: 1px solid transparent;
  border-image: svg(1px-border param(--color $navbar-border-color)) 2 2 stretch;

利用伪类::before或::after配合transform scale

/*$parent-position 如果传值则表示父元素已经有定位了，在此处不用设置*/
@mixin border-round-1px($radius, $color: $navbar-border-color, $parent-position: 0) {
  @if $parent-position {
    & {
      position: relative;
    }
  }
  & {
    border: none;
  }
  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    box-sizing: border-box;
    border: 1px solid $color;
    border-radius: 2*$radius;
    transform: scale(0.5);
  }
}