微信小程序 0.5px的border在ios上显示粗细不均匀的解决方法

如题所述,在微信小程序中,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上也能保证粗细一致。

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 约瑟发现了住在地板下面的小老鼠一家,看见它们家里还有布料,就向小老鼠家借了一些布料,并对他们说谢谢。 ...
    周依泽阅读 4,230评论 0赞 7
  • 恋你,从声音开始,我并不怎么记人脸,往往都是见了便忘。可你却是第一个让我有些讨厌自己的这个特点的。 这个世界上最不...
    一曲安乐_误终生阅读 387评论 3赞 2

友情链接更多精彩内容