::after伪元素配合transform: scaley(0.5)是最可控的0.5px边框方案，因border: 0.5px在ios12、安卓webview及uc/qq浏览器中普遍失效或被四舍五入为1px。
直接用 ::after 伪元素配合 transform: scaleY(0.5) 是目前最可控的解法，硬写 border-width: 0.5px 在 iOS 12、安卓 WebView、UC/QQ 浏览器里基本失效，不是不生效，是被浏览器直接忽略或四舍五入成 1px。
为什么 border: 0.5px 不可靠
它看起来直觉，但实际落地时问题密集：
-
getComputedStyle(el).borderWidth永远返回"1px"，你无法靠 JS 判断它是否真被渲染为 0.5px - iOS Safari 直到 13+ 才开始有限支持，iOS 12 及更早版本一律当无效值处理
- Android 4.4–6.0 的系统 WebView、UC/QQ 浏览器普遍把
0.5px当作0px，边框直接消失 - 即使识别了，在 DPR=3 设备上
0.5px × 3 = 1.5物理像素，Safari 插值后仍发虚，边缘模糊或断裂
::after + transform: scaleY(0.5) 必须满足的定位条件
只写缩放没用，漏掉任意一条都会偏位、露白、挡点击：
- 父元素必须设
position: relative，否则::after会相对于body定位 -
::after必须有非空content: ''，且显式声明background-color（无法继承） -
transform-origin必须写成0 100%或left bottom，确保从底部向上压缩；只写bottom在某些 Safari 版本里会失效 - 必须加
pointer-events: none，否则 UC/QQ 浏览器下伪元素会拦截点击，列表项点不中 - iOS 12–15 对无前缀属性支持不稳定，需补
-webkit-transform和-webkit-transform-origin
四边边框怎么避免缩放错位和裁切
单边用 scaleY(0.5) 简单，四边一起缩放容易错位、溢出或被裁：
-
::after设top: 0; left: 0; right: 0; bottom: 0;，再配width: 200%; height: 200%，然后transform: scale(0.5) - 必须显式声明
box-sizing: border-box，否则默认content-box会让伪元素多出 2px 宽高，缩放后仍外扩 -
transform-origin改为0 0（左上角），锚点才稳定，不随内容变化偏移 - 父容器若有
overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始尺寸计算，坐标系未同步收缩；可加will-change: transform提升图层防裁切
DPR=3 设备（如 iPhone 14 Pro）下 scaleY(0.5) 仍显粗怎么办
scaleY(0.5) 在 DPR=3 下实际占 1.5 物理像素（1px × 2 × 0.5 × 3 = 3 → 渲染为 1.5px），Safari 插值后仍发虚。媒体查询兜底最稳妥：
-
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx)内改用transform: scale(0.333) - 但 Safari 对
0.333渲染不稳定，更推荐 fallback 到box-shadow或linear-gradient方案 - 真正起效的前提是动态读取
window.devicePixelRatio并用 JS 注入data-dpr类名，硬编码scale(0.5)只覆盖 DPR=2
最易被忽略的是：缩放后的伪元素如果漏掉 pointer-events: none，在微信内置浏览器或 UC 中，用户根本点不到按钮或列表项——这不是样式问题，是交互阻断，上线后才发现就晚了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
