微信小程序1rpx边框问题

微信小程序设置边框样式

// wxml
<view class="btn">测试按钮</view>

// wxss
.btn{
  width: 680rpx;
  height: 88rpx;
  border: 1rpx solid #FF6E16;
  border-radius: 44rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FF6E16;
  font-size: 28rpx;
  margin: 0 15rpx 20rpx;
  position: relative;
}

在ios部分手机里面出现边框模糊问题

微信截图_20210611144719.png

解决方法

1. 当标签的父元素宽度(单位rpx)÷2的值为偶数或者偶数.5的时候就会出现该bug。如680÷2=340、600÷2=300均出现该bug，将父元素的宽度设置到无bug值，即(奇数或奇数.5)*2，如602，603

// wxss
.btn{
  // 修改宽度
  width: 682rpx;
  height: 88rpx;
  border: 1rpx solid #FF6E16;
  border-radius: 44rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FF6E16;
  font-size: 28rpx;
  margin: 0 15rpx 20rpx;
  position: relative;
}

若只改宽度后还是出现模糊，需要高度也设置为(奇数或奇数.5)2*
2.修改css 通过设置after样式设置边框

// wxml
<view class="btn">测试按钮</view>

// wxss
.btn{
  width: 680rpx;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FF6E16;
  font-size: 28rpx;
  margin: 0 15rpx 20rpx;
  position: relative;
}
.btn::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  box-sizing: border-box;
  border-radius: 88rpx;
  border: 2rpx solid #FF6E16;
  -webkit-transform: scale(.5);
  transform: scale(.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}