border-width: 0.5px 不稳定因设备像素比差异及旧版浏览器兼容性差；可靠方案是伪元素缩放或 linear-gradient 模拟，需严格满足定位、缩放锚点、pointer-events 等约束。
直接用 border-width: 0.5px 在 iOS 13+ 可行，但 iOS 12 及更早版本会忽略或四舍五入为 1px；Android 大部分机型根本不识别 —— 所以不能作为主力方案。
为什么 border-width: 0.5px 不稳定
设备像素比（devicePixelRatio）决定渲染行为：iPhone 8 是 2，iPhone 13 是 3，CSS 的 1px 是逻辑像素，浏览器直接映射为对应数量的物理像素。0.5px 只在 iOS Safari 13+ 有限支持，旧版 Safari、多数 Android WebView 都当无效值处理；getComputedStyle(el).borderWidth 甚至仍返回 "1px"，说明底层未真正生效。
::after + transform: scaleY(0.5) 必须满足的四个约束
漏掉任意一条，边框就会偏位、露白、或拦截点击事件：
- 父元素必须设
position: relative，否则伪元素定位失效 -
::after必须用height: 1px+background-color，别用border-bottom: 1px（盒模型干扰缩放后边缘） -
transform-origin必须显式写成0 100%或left bottom，确保缩放锚点在左下角，避免下边框上浮 - 必须加
pointer-events: none，否则微信内置 WebView 等会拦截点击
四边边框用 scale(0.5) 时的盒模型坑
想给整个容器加四边 1px 边框，不能对元素本身设 border 再缩放 —— 这会让 border 占用宽高，挤窄内容区。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 伪元素设
top: 0; left: 0; right: 0; bottom: 0; - 同时设
width: 200%; height: 200%，再配合transform: scale(0.5) - 必须加
box-sizing: border-box，否则缩放后可能溢出
单边边框推荐用 linear-gradient 替代
只画底部/顶部边框时，linear-gradient 更轻量、无定位依赖、无 pointer-events 风险：
.line-bottom {
background: linear-gradient(to bottom, transparent 50%, #ddd 50%) no-repeat left bottom;
background-size: 100% 1px;
}
注意：该方案不适用于需要圆角或带阴影的边框，且无法控制 border-style（如 dashed）。
真正稳定的 0.5px 效果，本质不是“写个更小的数值”，而是绕过浏览器对 sub-pixel 渲染的放弃 —— 所以缩放伪元素、渐变模拟、SVG 贴图这些方案，核心都是用整数物理像素 + 视觉降级来骗过渲染引擎。最容易被忽略的是 transform-origin 和 pointer-events，缺一不可。
