.5 border

@function pxTorem($px) {
  //$px为需要转换的字号
  @return $px / $browser-default-font-size * 1rem;
}

// 给容器添加边框，注意不要覆盖容器，设置z-index
.border {
  position: relative;
}
.border:after {
  content: '';
  position: absolute;
  top: 0;
  width: 200%;
  height: 200%;
  left: 0;
  border: 1px solid $default-border-color;
  border-radius: pxTorem(26px);
  transform: scale(0.5);
  transform-origin: 0 0;
  z-index: 1;
}

.border-t {
  position: relative;
  &:before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid $default-border-color;
    color: #e5e5e5;
    transform-origin: 0 0;
    transform: scaleY(0.5);
    z-index: 1;
  }
}

.border-b {
  position: relative;
  &:after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
    height: 1px;
    border-top: 1px solid $default-border-color;
    color: #e5e5e5;
    transform-origin: 0 0;
    transform: scaleY(0.5);
    z-index: 1;
  }
}

.border-tb {
  position: relative;
  &:before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid $default-border-color;
    color: #e5e5e5;
    transform-origin: 0 0;
    transform: scaleY(0.5);
    z-index: 1;
  }
  &:after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 100%;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid $default-border-color;
    color: #e5e5e5;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
    z-index: 1;
  }
}