如题所述,在微信小程序中,0.5px的boder在ios上会显示粗细不均匀,这是由于ios的像素导致的,具体的可以看 https://www.jianshu.com/p/539e5a9129d6
具体的解决方案如下:
<view style='width: 98rpx; height: 40rpx; color: white; font-size: 18rpx; display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: relative;'>
活动说明
<view class='border'></view> <!-- 这个才是边框 -->
</view>
.border::after {
content: '';
position: absolute; /* 把父视图设置为relative,方便定位*/
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 40rpx;
border: 1px solid #fff;
}
不再是直接style里面添加0.5px的border,而是内部添加一个view,把border通过伪元素绘制出来,宽高是200%、边框是1px,通过缩放0.5倍,绘制出和父视图一样的粗细的border,在ios上也能保证粗细一致。