真正可靠的0.5px细线方案是伪元素缩放+精确坐标控制：用::after设height:1px、transform:scaley(0.5)、transform-origin:0 100%、pointer-events:none，并按dpr用媒体查询调整缩放值。
直接用 border: 0.5px 不可靠——绝大多数安卓 WebView、旧版 Safari 会忽略或向上取整为 1px，连颜色精度和圆角衔接都难保证。真正在高 DPR 设备（如 iPhone、dpr=3 的安卓旗舰）上实现视觉上“物理像素级 0.5px”且不侵入盒模型的方案，只有伪元素缩放 + 精确坐标控制这一条主路径。
为什么不能直接写 border-width: 0.5px
W3C 规范未强制要求支持非整数 border-width；浏览器实现高度碎片化：0.5px 在 iOS 15+ 可能渲染，但在 Android Chrome 110–125 中常被截断为 0 或 1px；更致命的是，dpr=3 设备需要的是 0.333px，而这个值根本无法静态声明。真正起作用的不是“写了多少”，而是“最终映射到几个物理像素”。
::after + transform: scaleY(0.5) 的最小可靠写法
这是目前零 JS、无图片、兼容 iOS 12+/Android Chrome 80+ 的最稳解法，但极易因定位偏移或盒模型失控失效：
- 父容器必须设
position: relative，否则::after会脱离上下文定位到body -
::after用height: 1px; background-color: #ccc，别用border-bottom: 1px——后者缩放后边缘易发虚、抗锯齿异常 -
transform-origin必须显式设为left bottom（即0 100%），否则默认缩放中心在中点，下边框会上浮露白 - 必须加
pointer-events: none，防止伪元素遮挡点击区域 - 需配合媒体查询适配不同 DPR：
@media (-webkit-min-device-pixel-ratio: 3)里把scaleY(0.5)改成scaleY(0.333)
四边边框用 scale(0.5) 时的盒模型陷阱
想给整个容器加四边细线？别对原元素设 border，也别用 width: 100%; height: 100% + border 再缩放——那样会让边框计入宽高，挤窄内容区：
-
::after必须设width: 200%; height: 200%，再配transform: scale(0.5)才能铺满父容器 - 必须紧跟
box-sizing: border-box，否则边框外扩导致四角错位、右侧/底部溢出 -
transform-origin改为0 0（左上角），避免内容变化时缩放锚点漂移 - 若父容器有
overflow: hidden，缩放后的伪元素可能被裁——因为它是基于原始 200% 尺寸计算的，坐标系未同步收缩
真正难的不是写出某个缩放值，而是区分模糊来源：是设备 DPR 导致的天然渲染粒度，还是用户主动缩放（如 Chrome 按 Ctrl+滚轮）引发的二次 transform 失效。这时候得靠 linear-gradient 或 box-shadow 这类不依赖缩放的方案兜底——但它们各自有新限制，比如 box-shadow: 0 0 0 0.5px 在 Safari 中不支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
