美文网首页
微信小程序 1rpx的border在ios上显示粗细不均匀的解决

微信小程序 1rpx的border在ios上显示粗细不均匀的解决

作者: 单抽律化娜 | 来源:发表于2019-01-15 15:38 被阅读72次

如题所述,在微信小程序中,1rpx的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: 2rpx solid #fff;
}

不再是直接style里面添加1rpx的border,而是内部添加一个view,把border通过伪元素绘制出来,宽高是200%、边框是2rpx,通过缩放0.5倍,绘制出和父视图一样的粗细的border,在ios上也能保证粗细一致。

相关文章

网友评论

      本文标题:微信小程序 1rpx的border在ios上显示粗细不均匀的解决

      本文链接:https://www.haomeiwen.com/subject/nmsarqtx.html