移动端border-bottom过粗的问题

• 通过transform将宽度缩小一半，transform:scaleY(0.5)
• 通过伪类实现

<div class="thin-bottom-border">aaaaaa</div>

.thin-bottom-border{
  position: relative;
}

// 底边
.thin-bottom-border:before {
  content: "";
  pointer-events: none;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  /* height: 200%; */
  height: 1px;
  left: 0;
  bottom: 0;
  border-bottom:1px solid #D7D7D7;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

// 边框
.thin-border:before {
  content: "";
  pointer-events: none;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 200%;
  /* height: 1px; */
  left: 0;
  top: 0;
  /* background: #D7D7D7; */
  border:1px solid #D7D7D7;
  border-radius: 10rpx;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
}