border 1rpx不能正常显示
发布于 6 年前 作者 gangduan 1388 次浏览 来自 问答

效果，如下图所示。

通过remote dug发现在在ios上，border:1rpx 被渲染为 0.5px。

ios12上部分border显示不正常，安卓ok。

5 回复

1rpx的border, 在ios上会粗细不均，建议1rpx的边框，自己绘制吧

类似这样：

<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: 2rpx solid #fff;
}
利用after伪元素，生成宽高是200%、边框是2rpx的一个视图，通过缩放0.5倍，获得一个和父视图边框一样的边框，可以把2rpx的边框缩为1rpx的边框，在ios上也能保证粗细一致。

来个人回答一下嘛

+1

父容器宽度除以2，得出的值是偶数或偶数.5，就会出现这个bug;例如父容器宽度是200rpx，就设成202rpx试一下，这是在ios上会出现的bug;

遇到同样问题，请问解决了吗？

回到顶部