缩放时边框粗细不均是浏览器强制重映射导致的渲染失真，非css错误；应改用::after+transform:scaley(0.5)模拟细线，并设position:relative、transform-origin:0 100%、height:1px、background-color和pointer-events:none。
缩放时边框粗细不均，不是 CSS 写错了，而是浏览器在非 100% 缩放下对 border 值做了强制重映射——它必须保证“至少能看见边框”，于是把计算出的小于 1px 的值（比如 0.7px）向上取整到 1.067px 或 1.6px，再反向渲染，结果就是物理宽度跳变、边缘发虚、左右不对称。
为什么 transform: scale() 会让 border 渲染失真
缩放本身不修改元素的 CSS 像素声明，但会改变其最终渲染尺寸。例如 border-bottom: 1px solid #e5e7eb 在缩放 75% 时，浏览器实际尝试渲染的是 ≈ 1.067px，而这个值无法精确落在物理像素网格上，只能插值，导致抗锯齿模糊、左右边 border 宽度感知不一致。
- 父子元素同时有
border和背景色时，缩放后小数位被截断，容易暴露间隙（比如白色细线） -
box-sizing: border-box防止内容撑宽，但不干预 border 自身的渲染抖动 - 高 DPR 屏幕（如 iPhone dpr=3）下问题更明显：1px CSS 像素被拉伸成 3 物理像素，缩放后再插值，糊得更厉害
用 ::after + transform: scaleY(0.5) 替代原生 border
这是目前兼容性最好、可控性最强的方案，原理是先画一个标准 1px 高的伪元素（在 dpr=2 下占 2 物理像素），再纵向压缩一半，使其在视觉上回归 1 物理像素宽度，且不干扰布局。
- 父元素必须设
position: relative，否则::after的position: absolute会脱标 -
transform-origin: 0 100%是关键：确保scaleY(0.5)从底部向上压，不偏移对齐线 - 伪元素用
height: 1px+background-color，别用border，避免盒模型干扰 - 务必加
pointer-events: none，否则伪元素会拦截点击
哪些写法看似合理实则踩坑
很多开发者试过但失败的方案，问题不在逻辑，而在细节失控：
-
border-bottom: 0.5px solid #eee：iOS Safari 15.4 以下、旧版安卓 WebView 直接当 0px 渲染，边框消失 -
transform: scale(0.5)加在整个容器上：文字、图标全被缩放，UI 比例崩坏，且border仍参与盒模型计算 -
border-style: dashed配合缩放：段长由border-width推导，缩放后整除逻辑崩溃，首尾断裂明显 - 没设
overflow: hidden的父容器：缩放后的伪元素可能被裁掉，尤其圆角场景下边框突然截断
真正稳定的做法只有两个方向：要么彻底禁用用户缩放（<meta name="viewport" content="user-scalable=no">），要么放弃 border 属性本身。所有试图靠调整 border-width 数值或依赖浏览器自动适配的思路，在缩放场景下都会失效——这不是配置问题，是渲染机制的硬约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
