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;

}

相关推荐
yuanmenglxb20042 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼2 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_09276 分钟前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸8 分钟前
一文带你使用Vue完成移动端(apk)项目
前端
会飞的鱼先生20 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了20 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风26 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风27 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺1 小时前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺1 小时前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试