小程序1rpx边框不完美

问题展示

原因

rpx类似rem,渲染后实际转换成px之后可能存在小数,在不同的设备上多多少少会存在渲染的问题。而1rpx的问题就更加明显,因为不足1个物理像素的话,在IOS会进行四舍五入,而安卓好像统一向上取整,这也是上面两种设备表现不同的原因

解决方法

我们采用的方法是采用translate:scale(0.5)的方法对边框进行缩放

css 复制代码
.select-box{
  position: relative;
  border-width: 0rpx !important;
  padding: 0.5rpx;
  z-index: 0;
}
.select-box::after{
  box-sizing: border-box !important;
  position: absolute;
  border-width: 2rpx !important;
  left: 0;
  top: 0;
  width: 200% !important;
  height: 200% !important;
  transform-origin: 0 0;
  transform: scale(0.5) !important;
  z-index: -1;
}
  • 给.select-box的元素设置边框宽度为0
  • 给::after伪元素宽高为两倍,边框设置2rpx,
  • 边框其他样式继承元素的设置
  • 然后再缩放0.5来达到边框为1rpx的效果

题外话

border: 1rpx solid #ccc = border-width、border-style、border-color

相关推荐
石金龙15 小时前
[译] Composition in CSS
前端·css
天天扭码15 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户4582031531716 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪1 天前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy2 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy2 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
墨渊君2 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
小帆聊前端2 天前
Flex 布局实战指南:从踩坑到精通,解决 90% 布局难题
css
谢尔登2 天前
【CSS】层叠上下文和z-index
前端·css
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview