真正能跨设备稳定输出1物理像素细线的只有伪元素+transform: scale()方案；因直接写border: 0.5px在多数Android WebView、微信浏览器及旧版iOS中不可靠，且DPR=3设备上显示为1.5物理像素。
直接写 border: 0.5px 在多数 Android WebView、微信内置浏览器、旧版 iOS 中会被忽略或向上取整为 1px，DPR=3 设备（如 iPhone 14 Pro）上甚至显示为 1.5 物理像素——它根本不可靠。真正能跨设备稳定输出 1 物理像素细线的，只有伪元素 + transform: scale() 方案。
为什么必须用 ::after 而不是直接缩放容器
缩放整个元素会连带文字、内边距、子元素一起变小，破坏布局；而伪元素只负责画线，内容区域完全隔离。关键点：
-
::after必须设position: absolute，脱离文档流，否则缩放后会撑开父容器高度 - 缩放前尺寸要放大（如
width: 200%、height: 200%），再用scale(0.5)缩回，避免 subpixel 渲染模糊 - 必须加
box-sizing: border-box，否则border: 1px缩放后位置偏移 -
transform-origin要设为0 0（左上角），不是默认的中心点，否则边框错位
transform: scaleY(0.5) 和 transform: scale(0.5) 怎么选
取决于你要画哪条边：
- 仅底边/顶边：用
scaleY(0.5)，伪元素设height: 1px+bottom: 0（或top: 0），更轻量 - 四边框：用
scale(0.5)，伪元素设width: 200%、height: 200%、border: 1px solid #ccc - 左右边：用
scaleX(0.5)，配合left: 0+top: 0+width: 1px+height: 100%
注意：scaleY(0.5) 的 transform-origin 应设为 bottom（底边）或 top（顶边），不然线条会整体上移/下移。
圆角容器里加 0.5px 边框容易漏掉的关键处理
如果父容器有 border-radius: 4px，直接给 ::after 加同样值会导致缩放后圆角被压扁——因为缩放是按逻辑像素算的，必须「反向补偿」：
- 若用
scale(0.5)，::after的border-radius要设为8px（即原值 ÷ 0.5） - 若用
scaleY(0.5)画底边，则无需设圆角，但需确保bottom: 0与父容器border-radius对齐，否则直角露馅 - 滚动区域中固定底边时，
position: absolute会随滚动脱离，此时应改用position: sticky或监听scroll用 JS 重定位
深色模式和 DPR 动态适配要不要加媒体查询
可以不加，但推荐加。原因：
- DPR=2 设备（如 iPhone 8）用
scale(0.5)刚好；DPR=3（如 iPhone 14 Pro）需scale(0.33)才是 1 物理像素，硬写死0.5会略粗 - 媒体查询可写成
@media (-webkit-min-device-pixel-ratio: 3)，单独覆盖transform: scale(0.33) - 深色模式下，别用
#000或#fff写死颜色，改用CSS color-scheme或prefers-color-scheme媒体查询动态切色 - 伪元素默认无 pointer-events，不影响点击穿透，但如果父元素有
z-index层级关系，要确认::after的z-index是否遮挡了可点击区域
最易被忽略的是：缩放后的伪元素在部分安卓机型上可能轻微发虚，这不是 bug，是 subpixel 抗锯齿策略导致的——此时换用 linear-gradient 方案反而更锐利，但牺牲了圆角支持能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
