真正“看起来是1px”的解法只有伪元素+transform:scale()，因border:1px在高dpr设备会变粗发虚，0.5px等非整数边框兼容性差且易触发重排。
直接用 border: 1px 在 iPhone、iPad Pro 或高分安卓机上必然变粗发虚，这不是你写错了，是浏览器按 window.devicePixelRatio 渲染的结果——DPR=2 时，1 CSS px 占 2 物理像素，插值拉伸后边缘半透明。真正“看起来是 1px”的解法，只有伪元素 + transform: scale() 这一条路走得稳。
为什么 border: 0.5px 大部分场景根本不能用
看似最直觉，实际最坑：iOS 8+ 虽支持 0.5px，但旧版 Safari、多数安卓 WebView 会直接忽略或向上取整为 1px；0.333px 在 DPR=3 设备上连 CSS 解析器都过不了关，声明直接被丢弃。更麻烦的是，在 flex 或 grid 容器里，非整数 border-width 可能触发重排或尺寸抖动。
-
0.5px在 Chrome 120+/Safari 17+ 有有限支持，但必须搭配@media (-webkit-min-device-pixel-ratio: 2)才能降级，无法覆盖所有机型 - 硬写
border-width: calc(1px / 3)会被编译器转成浮点数，精度丢失后缩放失效 - 伪元素方案不依赖非整数边框值，绕开了整个解析和渲染兼容性雷区
::after + transform: scaleY(0.5) 的单边写法及关键约束
这是最常用也最容易翻车的写法。它不是“缩放边框”，而是画一个 height: 1px 的色块，再纵向压缩一半，让 DPR=2 设备刚好落在 1 物理像素上。
- 父元素必须设
position: relative，否则::after无法绝对定位到底部 -
transform-origin: left bottom必须显式写，否则缩放中心偏移，边框会上浮或断裂 - 别用
border-bottom: 1px solid #ccc—— 缩放后边缘模糊；改用background-color+height: 1px - 务必加
pointer-events: none，否则伪元素会拦截点击（列表项、按钮交互失灵就在这儿）
四边全边框时 width/height 和 box-sizing 怎么配
单边靠 scaleY，四边必须用 scale(0.5) 整体缩放，但原始尺寸不调大会溢出，不设 box-sizing 会错位。
- 伪元素设
width: 200%、height: 200%，再transform: scale(0.5)回去 - 必须紧跟
box-sizing: border-box，否则border: 1px会让伪元素实际宽高多出 2px，缩放后四角发虚 -
transform-origin: left top比0 0更稳，尤其在有padding或border-radius的父容器里 - 如果父容器有
overflow: hidden，伪元素可能被裁掉——加transform: translateZ(0)强制图层提升
圆角、滚动容器、嵌套 flex 布局……这些不是“方案不行”，而是缩放坐标系没对齐。真正难的从来不是写几行 CSS，而是把 transform-origin、box-sizing、pointer-events 这三样全塞进脑子里，漏一个，边框就断在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
