微信小程序 border iOS 1px不展示bug

微信小程序 border iOS 1px不展示bug

很多人分享的写法是知道标签的内容的 所以可以设置宽度 当不知道宽度时可以用伪类去设置border

// wxml
{{groupLabel1}}
{{groupLabel2}}               

// wxss
.label {
  border-radius: 4rpx;
  display: inline-block;
  text-align: center;
  padding: 0 20rpx;
  line-height: 30rpx;
  margin-right: 10rpx;
  font-size: 19rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  position: relative; // *****注意这里****
}
.label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  box-sizing: border-box;
  border-radius: 8rpx;
  border: 2rpx solid #DBDEEC;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

之前在iOS部分机型会有缺边的情况 这种写法在这类机型上是正常展示的 缺点就是伪类只能写在css里（如果有方法可以留言给我，谢谢） 如果边框的颜色也要变 这个就不适用了，目前这是我用的觉得最好用的一个方法

参考自：链接: 点这里 感谢分享~