<template>
  <div id="demo">
    <div class="demo-block">
      <span>1px 边框</span>
      <div class="demo-box bx-hairline--top" />
      <div class="demo-box bx-hairline--bottom" />
      <div class="demo-box bx-hairline--left" />
      <div class="demo-box bx-hairline--right" />
      <div class="demo-box bx-hairline--surround" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
}
</script>
<style>
.demo-box {
  background-color: #fff;
  width: 50px;
  height: 50px;
  margin: 10px 10px 20px 0;
  color: #f43030;

  &.bx-hairline--surround::after {
    background-color: transparent;
  }
}
/* 自定义border颜色为当前元素的color */
.demo-box::after {
  border-color: currentColor;
  background-color: currentColor;
}
.demo-block {
  margin: 30px;
  font-size: 24px;
}
</style>
