知识点：transform (opens new window)

通过 border + 伪元素 + transform 实现

原理：设置1px边框，通过设置 transform scale来进行缩放。

0.5px边框

上边框

右边框

下边框

左边框

上下边框

左右边框

<template>
  <div class="demo-onepxline">
    <div class="elem b-1px">0.5px边框</div>
    <div class="elem bt-1px">上边框</div>
    <div class="elem br-1px">右边框</div>
    <div class="elem bb-1px">下边框</div>
    <div class="elem bl-1px">左边框</div>
    <div class="elem bt-1px bb-1px">上下边框</div>
    <div class="elem bl-1px br-1px">左右边框</div>
  </div>
</template>

<script>
export default {
  name: 'OnePxLine'
}
</script>

<style lang="scss">
.demo-onepxline {
  display: flex;
  flex-wrap: wrap;
  .elem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 40px;
    margin: 20px 10px 0 0;
    background-color: var(--bodyBg);
    &::before, &::after {
      position: absolute;
      content: '';
    }
  }
  .b-1px::before {
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid var(--textLightenColor);
    transform: scale(0.5);
    transform-origin: 0 0;
  }
  .bt-1px::before {
    top: 0;
    left: 0;
    width: 100%;
    transform: scaleY(0.5);
    border-top: 1px solid var(--textLightenColor);
  }
  .br-1px::after {
    top: 0;
    right: 0;
    height: 100%;
    transform: scaleX(0.5);
    border-right: 1px solid var(--textLightenColor);
  }
  .bb-1px::after {
    bottom: 0;
    right: 0;
    width: 100%;
    transform: scaleY(0.5);
    border-bottom: 1px solid var(--textLightenColor);
  }
  .bl-1px::before {
    top: 0;
    left: 0;
    height: 100%;
    transform: scaleX(0.5);
    border-left: 1px solid var(--textLightenColor);
  }
}
</style>