最稳解法是::after伪元素+transform:scaleY(0.5)，因DPR导致1px映射为2+物理像素而变粗；需父元素position:relative、transform-origin:0 100%防偏位，伪元素用height:1px+background-color并加pointer-events:none。
直接写 border: 1px solid #000 在 iPhone 或高 DPR 安卓机上必然变粗，这不是你代码写错，是浏览器把 1 个 CSS 像素映射为 2 或 3 个物理像素。真正能稳定落地的方案只有三种：伪元素 + transform: scaleY(0.5)、box-shadow 模拟单边、border-image 配合媒体查询。
为什么 border-width: 0.5px 几乎不可用
看似最直觉，但实际踩坑极多：
-
border-width: 0.5px在 iOS Safari 13+ 才开始有限支持；旧版安卓 WebView（尤其 Android 4.4–6.0）直接忽略，渲染为 0 - 即使识别了，抗锯齿会让线条发虚、边缘模糊
- 无法通过 CSS 变量或继承动态控制颜色，必须每个地方硬写
border-color - 不能和
border-radius共存——圆角会截断边框，视觉断裂 - 一旦用了
0.5px，后续加box-shadow或filter易引发渲染异常
::after + transform: scaleY(0.5) 怎么写才不偏位
这是目前最稳、覆盖机型最广的方案，但细节错一点就失效：
- 父元素必须设
position: relative，否则::after的position: absolute会相对于body定位，飘走 -
transform-origin必须显式写成0 100%（左下角），不是默认的50% 50%，否则scaleY(0.5)会从中心压缩，导致边框上浮或下沉 - 伪元素的
height推荐写1px而非2px，再配scaleY(0.5)，语义清晰且避免误算 - 如果父容器有
overflow: hidden，缩放后的伪元素可能被裁掉，需改用clip-path: inset(0)替代 - 务必加
pointer-events: none，否则某些安卓 WebView 下伪元素会拦截点击
box-shadow 适合哪些场景
它不改变布局流、不触发重排、无缩放副作用，但只适用于单向、轻量分隔线：
- 比如列表项之间、输入框下划线、卡片分割线
- 写法是
box-shadow: 0 1px 0 rgba(0,0,0,.12)，其中1px是物理像素（截至 2026 年 10 月） - 不支持四边同时模拟（
box-shadow多层叠加在部分低版本安卓上会糊成一片） - 颜色只能是单色，无法实现渐变边框或虚线
- 当需要精确对齐内容底部（如
input下划线）时，box-shadow的垂直偏移比伪元素更可控，无需担心transform-origin错位
真正容易被忽略的是：所有方案都依赖设备像素比（window.devicePixelRatio）的真实值，而这个值在某些定制 ROM 或 WebView 容器里可能被篡改或返回 undefined；上线前务必在真机（尤其是华为鸿蒙 WebView、小米快应用容器）中验证伪元素是否被裁、box-shadow 是否糊边、border-image 是否加载失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
