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

liwan_1219

已于 2022-01-21 11:07:11 修改

阅读量2.5k

点赞数

文章标签：微信小程序小程序 ios

于 2022-01-21 11:06:46 首次发布

本文链接：https://blog.csdn.net/liwan_1219/article/details/122616366

版权

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

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

// wxml
<text class="label" user-select="false" space="false" decode="false">{{groupLabel1}}</text>
<text class="label" user-select="false" space="false" decode="false">{{groupLabel2}}</text>

// 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里（如果有方法可以留言给我，谢谢）如果边框的颜色也要变这个就不适用了，目前这是我用的觉得最好用的一个方法