box-sizing: border-box 无法消除尺寸偏差，根本原因是伪元素（如 ::after）未显式设置 transform-origin、未配合 overflow: hidden 处理圆角、未对齐物理像素网格，且其定位基于 padding-box 而非 content-box，导致缩放后偏移或露白。
直接写 border: 1px 会导致盒模型尺寸膨胀，尤其在 box-sizing: border-box 下仍会因伪元素缩放错位或父容器未重置导致视觉偏差——这不是边框“粗”，而是边框占位没对齐物理像素网格。
为什么 border-box 也压不住尺寸偏差？
根本原因是：伪元素（如 ::after）生成的 1px 高条，在 transform: scaleY(0.5) 后若未精确锚定基点，其渲染位置会漂移，造成上下/左右边距“多出半像素”。尤其当父元素有 padding 或 border-radius 时，这种偏移会被放大为明显错位。
-
transform-origin必须显式写成0 100%（下边框）或0 0（上边框），不能依赖默认值；Safari 和部分安卓 WebView 对bottom/top关键字解析不一致 - 父元素若设了
border-radius，但伪元素没裁剪，圆角处会出现“白边”或“断线”——此时必须加overflow: hidden到父元素，而非在伪元素上硬套border-radius -
height: 1px的伪元素在 DPR=3 设备上实际渲染为 1.5 物理像素（1 × 3 × 0.5），浏览器插值后边缘发虚，视觉上像“变宽”
::after 边框的定位与尺寸必须手动对齐物理像素
伪元素不是“画一条线”，而是“画一个矩形再压扁”。它的 top/bottom/left/right 值必须严格对应父容器的盒边界，否则缩放后会露白或盖住内容。
- 下边框用
bottom: 0+height: 1px+transform-origin: 0 100%，确保压缩从底部向上发生 - 左边框用
left: 0+width: 1px+transform-origin: 0 0+transform: scaleX(0.5) - 全边框慎用
transform: scale(0.5)，它会同时缩放 width/height，容易让right: 0和bottom: 0失效；推荐拆成四个伪元素分别控制 - 避免用
border-bottom: 1px作为伪元素基础——它受盒模型影响，缩放后易模糊，且无法精确控制起始位置
如何避免 padding 和伪元素冲突？
当你给父元素加了 padding: 10px，又用 ::after 模拟下边框，这条“线”默认会从 padding-box 底部开始画，而不是 content-box 边界。结果就是边框看起来“下沉”了 10px。
- 统一用
box-sizing: border-box，并明确父元素的padding是否应包含边框视觉区域 - 伪元素定位优先基于
content-box：给父元素加position: relative，伪元素用content-box语义定位（如bottom: -1px补偿自身高度） - 更稳妥的做法是把 padding 拆出去：父容器只负责边框，内层再包一层带
padding的子容器 - 测试时务必在真机打开
chrome://inspect，用“Toggle device toolbar”选中 DPR=2/3 模式，别信模拟器的渲染结果
真正难处理的不是“怎么画细线”，而是“怎么让这条线严丝合缝贴在该在的位置”——缩放、定位、盒模型、DPR 四者只要一个没对齐，就会出现 0.5px 级别的偏差，而人眼对线条连续性极其敏感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
