不能直接写 border-width: 0.5px，因多数安卓 WebView 将其四舍五入为 1px 或忽略，iOS Safari 12 及以下直接退化为粗边框，且 getComputedStyle 返回恒为 "1px"；真正可靠的是 ::after + transform: scaleY() 方案，但必须同时满足 position: relative、transform-origin 精确指定、pointer-events: none 和 box-sizing: border-box 四要素，缺一即失效。
为什么不能直接写 border-width: 0.5px
写了也白写。Android WebView 大部分版本会把 0.5px 四舍五入成 1px，getComputedStyle(el).borderWidth 返回的永远是 "1px"；iOS Safari 13+ 才开始有限支持，但 iOS 12（仍有约 8% 存量）直接忽略，退回到粗边框。这不是兼容性“差”，而是底层渲染链根本不走子像素逻辑。
::after + transform: scaleY() 必须配齐四要素
漏掉任意一个，真机上不是错位就是点不动：
-
position: relative要加在父选择器上，否则::after会相对body定位 -
transform-origin: 0 100%（下边框）或0 0（四边），不能只写bottom或left top，Safari 12–15 对简写支持极差 -
pointer-events: none是安卓 UC/QQ 内核下点击不失效的底线，不加就吞 touch 事件 -
box-sizing: border-box必须显式声明，否则伪元素默认content-box，缩放后尺寸溢出、四角露白
SCSS mixin 里怎么安全适配不同 dpr
别用 calc(1px / $dpr)——SCSS 编译期根本读不到运行时 dpr，那只是静态除法，毫无意义。正确做法是预定义媒体查询档位：
- 用
@each $dpr, $ratio in (2: 0.5, 3: 0.333)驱动@media块生成 - DPR=3 场景慎用
scaleY(0.333)：Safari 子像素抖动明显，建议 fallback 到box-shadow: 0 1px 1px -1px rgba(0,0,0,0.5)或background: linear-gradient(to bottom, #ccc 50%, transparent 50%) - 媒体查询必须同时写
(-webkit-min-device-pixel-ratio: 2)和(min-resolution: 192dpi)，只靠前者在部分 Android Chrome 上失效
圆角容器加 1px 边框，为什么伪元素上写 border-radius 会发虚
缩放会扭曲圆角曲率，导致边缘锯齿、接缝露白。真正可控的做法是让父容器裁剪：
立即学习“前端免费学习笔记（深入）”；
- 父元素设
border-radius和overflow: hidden - 伪元素保持矩形，不设任何圆角
- 必要时加
will-change: transform或transform: translateZ(0)防止 overflow 裁切缩放前的 200% 尺寸
