border: 1px在高分屏上变粗是因DPR导致，0.5px等非整数方案兼容性差；最可靠解法是::after+transform: scale()，需设position: relative、height: 1px、background-color、transform-origin及前缀，并注意四边缩放、box-sizing和图层提升。
直接写 border: 1px 在 iPhone、iPad Pro 或 MacBook 等高分屏上必然变粗，这不是代码错，是 window.devicePixelRatio（DPR）在起作用——DPR=2 时，1 CSS 像素占 2 物理像素；DPR=3 时占 3 物理像素。想“看起来是 1px”，必须绕过浏览器对 border 的默认渲染逻辑。
为什么 border: 0.5px 大部分场景不能用
看似最直觉的解法，实际踩坑最多：
- iOS 8+ 支持
0.5px，但旧版 Safari、多数安卓 WebView 会直接忽略或向上取整为1px（即仍渲染为 2 物理像素） -
0.333px在 DPR=3 设备上根本不会被解析，CSS 解析器直接丢弃该声明 - 所有非整数
border-width值，在flex/grid容器中可能触发重排或尺寸抖动
::after + transform: scale() 的可靠写法
这是目前兼容性最好、可控性最强的纯 CSS 方案，核心不是“缩放边框”，而是“画一个 2px 高的条，再压缩到视觉 1px”。关键不在缩放值，而在锚点和盒模型约束：
- 父元素必须设
position: relative，否则伪元素定位失效 - 伪元素用
height: 1px+background-color，别用border-bottom: 1px——后者受box-sizing影响，缩放后边缘易模糊 -
transform-origin必须显式写成left bottom（单边下边框）或0 0（四边），否则缩放中心偏移导致位置错位 - 加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀支持不稳定
四边边框怎么写才不飘、不裁、不模糊
单边缩放容易，四边一起上就容易出布局漂移、圆角拉伸、父容器 overflow: hidden 裁掉边框等问题。核心是统一锚点 + 统一缩放 + 盒模型约束：
立即学习“前端免费学习笔记（深入）”；
- 伪元素尺寸设为
width: 200%、height: 200%，再用transform: scale(0.5)整体缩回，确保四边都能铺满 - 必须加
box-sizing: border-box到伪元素上，否则缩放后边框位置容易飘移 -
transform-origin改为0 0（左上角），避免缩放后右/下边缘溢出 - 滚动容器中边框消失？给父容器加
transform: translateZ(0)或will-change: transform强制图层提升 - 圆角边框：把
border-radius写在父元素上，伪元素只负责边框色块
真正难的不是写对一行 scale(0.5)，而是当页面嵌套深、有 overflow: hidden、又带 border-radius 和 flex 布局时，多个渲染坐标系叠加导致伪元素“算不准位置”。这时候光靠 CSS 很难兜住，得结合 JS 动态注入 data-dpr 类名，再用属性选择器分条件处理——但这也意味着你得承担运行时检测失败的风险。
