用伪元素+transform:scale(0.5)是最可靠方案，通过缩放1px边框在高dpr设备上实现0.5px视觉效果，需配合position:relative、正确transform-origin及box-sizing:border-box，单边推荐height+scaley，四边需width/height设200%并以0 0为原点。
直接说结论：用伪元素 + transform: scale(0.5) 是目前最可靠、兼容性最好、能控制四边+圆角的方案，但必须注意 transform-origin 和容器 position 的配合，否则边框会错位或消失。
为什么伪元素缩放能“骗过”浏览器显示0.5px
本质不是真写了0.5px，而是让1px边框在高DPR设备（如iPhone）上被物理像素级缩放。比如dpr=2时，1px逻辑像素占2×2物理像素；缩放0.5后，边框实际只占用1个物理像素行/列，视觉上就变细了。
常见错误现象：::after 边框没对齐、只显示半截、或者完全看不见——基本都是 transform-origin 设错或父容器没设 position: relative。
- 必须给父元素加
position: relative，否则伪元素的绝对定位会脱离上下文 -
transform-origin要匹配边框位置：底边用bottom left，顶边用top left，四边全包用0 0 - 宽高设为
200%是为了缩放后仍能撑满容器（scale(0.5)后还原为100%） - 记得加
box-sizing: border-box，避免边框溢出影响布局
四边边框 vs 单边边框：写法差异很关键
四边全包和只画一条线，伪元素的尺寸、定位、缩放原点都不同，不能套用同一套代码。
四边全包（含圆角）示例：
.border-05 {
position: relative;
}
.border-05::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 200%; height: 200%;
border: 1px solid #ccc;
border-radius: 6px;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
}
仅底边（更轻量，适合列表分割线）：
.border-bottom-05 {
position: relative;
}
.border-bottom-05::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: #ccc;
transform: scaleY(0.5);
transform-origin: bottom left;
}
- 单边推荐用
height: 1px+scaleY(0.5)，比全边框更省渲染开销 - 单边无法用
border实现圆角，所以用background更灵活 - 如果要用
border-bottom模拟，得把伪元素拉宽到width: 200%再scaleX(0.5)，否则圆角会被裁掉
容易被忽略的兼容性细节
看似简单，但在安卓低版本 WebView、部分鸿蒙系统里，scale(0.5) 可能导致颜色发虚或抗锯齿异常，尤其在白色背景上。
- 实测发现：Chrome 80+、Safari 14+、iOS WKWebView 均稳定；但 Android 6–8 的系统 WebView 对
transform-origin解析有偏差 - 规避办法：对老安卓加媒体查询降级，例如
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px)才启用缩放 - 别忘了加
pointer-events: none到伪元素上，否则可能拦截点击事件 - 如果父容器有
overflow: hidden，缩放后的伪元素可能被裁剪，需检查z-index和层级
真正麻烦的从来不是怎么写出来，而是怎么让同一段 CSS 在 iPhone 15 Pro 的 dpr=3 屏幕、千元安卓机的 dpr=2.75 屏幕、还有微信内置 X5 内核里都看起来像一根干净利落的线——这时候缩放比例就得动态算，而不是硬写死 0.5。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
