transform: scaley(0.5) 是最稳的单边边框解法，通过伪元素绘制并缩放基准线，绕过小数 border 兼容性问题，兼容 ios 12+ 和主流安卓 webview。
直接写 border: 1px 在 iPhone 或高 DPR 安卓机上必然变粗，这不是你 CSS 写错了，是设备像素比（window.devicePixelRatio）导致的物理渲染结果——1 个 CSS 像素被拉伸成 2 或 3 个物理像素，插值后就糊、发虚、显粗。硬写 border-width: 0.5px 不可靠，多数 WebView 会四舍五入为 1px 或直接忽略。
为什么 transform: scaleY(0.5) 是最稳的单边解法
核心是绕过 border 属性本身，用伪元素画一条视觉“基准线”，再缩放控制物理像素占用。它不依赖浏览器对小数 px 的支持，兼容 iOS 12+ 和主流安卓 WebView。
- 父元素必须设
position: relative，否则::after会相对于body定位 -
::after推荐用height: 1px+background-color，别用border-bottom: 1px——后者受盒模型干扰，缩放后边缘易模糊 -
transform-origin必须显式写成0 100%（左下角），不能只写bottom；部分 Safari 版本对语义值解析不稳定 - 必须加
pointer-events: none，否则伪元素可能拦截点击，尤其在微信内置浏览器或低版本 UC 中 - 要补
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀属性支持不一致
如何适配 dpr=3 设备（如 iPhone 14 Pro、华为 Mate 系列）
硬编码 scaleY(0.5) 在 dpr=3 下实际渲染为 1.5 物理像素（1px × 0.5 × 3 = 1.5px），视觉上仍偏细或发虚。严谨做法是用媒体查询区分处理：
- 用
@media (-webkit-min-device-pixel-ratio: 3)单独定义类，比如.border-b-dpr3::after - 其中
transform: scaleY(0.333)，CSS 不支持表达式，必须写死0.333，不能写1/3 - 别用 JS 动态加 class——首屏渲染时 JS 还没执行，白屏期边框就错了
- 若项目需覆盖全机型，建议并存两套类：
.border-b-hairline-dpr2和.border-b-hairline-dpr3，用媒体查询控制生效范围
四边都加 1px 边框时最容易踩的盒模型坑
单边缩放好控制，但四边一起缩放极易错位、露白、甚至被裁掉。关键不是缩放值，而是伪元素的尺寸锚点和盒模型约束：
- 伪元素要设
top: 0; left: 0; right: 0; bottom: 0;，再配合width: 200%; height: 200%+transform: scale(0.5) - 必须显式声明
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后四角飘移 -
transform-origin改为0 0（左上角），确保缩放锚点稳定，不因内容变化偏移 - 父容器若有
overflow: hidden，缩放后的伪元素可能被裁——因为定位坐标系仍按原始 200% 尺寸计算，未同步收缩 - 圆角无法直接在伪元素上实现，应由父容器用
border-radius+overflow: hidden裁剪
真正容易被忽略的是：::after 的 content 必须是非空字符串（哪怕只是 ''），且 background-color 必须显式指定——它不会继承父级的 border-color，也不能靠 CSS 变量自动推导；真机连调试器看渲染层时，这些细节一漏，边框就断开、偏移或挡点击。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
