uniapp微信小程序1rpx border在某些手机机型上边框显示不出来解决方案

小程序在ios系统中,如果border小于1px的情况下,border就可能显示不全(可能少了上下左右任意一边)

只需要加一个::after或::before伪类,使用绝对定位定在原来元素上边就不会产生问题了!

.d_card_line1_tag {

padding: 1rpx 14rpx;

/* border: 1px solid #333; */

font-size: 18rpx;

position: relative;

}

.d_card_line1_tag::after{

content: '';

position: absolute;

left: 50%;

top: 50%;

width: 100%;

height: 100%;

transform: translate(-50%,-50%);

border: 0.5px solid #333;

border-radius: 4rpx;

}

相关推荐
大帅不是我几秒前
Python多进程编程执行任务
java·前端·python
前端怎么个事1 分钟前
框架的源码理解——V3中的ref和reactive
前端·javascript·vue.js
Ciito4 分钟前
将 Element UI 表格元素导出为 Excel 文件(处理了多级表头和固定列导出的问题)
前端·vue.js·elementui·excel
不爱吃饭爱吃菜1 小时前
uniapp微信小程序一键授权登录
前端·javascript·vue.js·微信小程序·uni-app
明耀1 小时前
WPF C# 用WebView加载H5页面(uniapp项目,vue项目)
uni-app·c#·wpf
90后小陈老师2 小时前
3D个人简历网站 5.天空、鸟、飞机
前端·javascript·3d
不爱吃糖的程序媛6 小时前
浅谈前端架构设计与工程化
前端·前端架构设计
BillKu7 小时前
Vue3 Element Plus 对话框加载实现
javascript·vue.js·elementui
郝YH是人间理想7 小时前
系统架构设计师案例分析题——web篇
前端·软件工程
Evaporator Core8 小时前
深入探索:Core Web Vitals 进阶优化与新兴指标
前端·windows