兼容性不好的做法

1. 直接设置0.5px，在很多浏览器都没直接不显示。
2. background: linear-gradient(0deg, #fff, #000);，线发虚
3. box-shadow: 00.5px0#000;，线发虚

transform scale

• 方案一：一个标签一条线，不够灵活

.line{
  height: 1px;
  width: 100%;
  background-color: red;
  transform: scaleY(0.5)
}

• 方案二：使用伪元素

.line {
  position: relative;
}

.line::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  border-width: 1px;
  border-style: solid;
  transform: scale(0.5, 0.5);
  border-radius: 1px;
  box-sizing: border-box;
  pointer-events: none;
  border-bottom: 1px;
}

• 升级版：1px边框

.border {
  position: relative;
}

.border::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  border-width: 1px;
  border-style: solid;
  transform: scale(0.5, 0.5);
  border-radius: 1px;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px;
}

拓展，画三角形

.right-retangle{
  width: 0;
  height: 0;
  border-left: 10px solid red;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid transparent;
}