<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;
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上也能保证粗细一致。