真正能落地的解法只有三种：伪元素+transform: scaleY(0.5)、box-shadow模拟单边、border-image配合媒体查询；其他方案兼容性差或副作用大。
直接写 border: 1px 在 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 的系统 WebView）直接忽略，渲染为 0；即使识别了，抗锯齿会让线条发虚、边缘模糊。更麻烦的是：
-
0.5px无法通过 CSS 变量或继承动态控制颜色，必须每个地方硬写border-color - 不能和
border-radius共存——圆角会截断边框，视觉断裂 - 一旦用了
0.5px，后续加box-shadow或filter极易引发渲染异常 - 测试时可用
document.createElement('div').style.border = '0.5px solid #000'+offsetHeight判断是否生效，但线上环境无法保证所有用户都走同一路径
::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 年 5 月 20 日） - 不支持四边同时模拟（
box-shadow多层叠加在部分低版本安卓上会糊成一片） - 颜色只能是单色，无法实现渐变边框或虚线
- 当需要精确对齐内容底部（如 input 下划线）时，
box-shadow的垂直偏移比伪元素更可控，无需担心transform-origin错位
真正容易被忽略的是：伪元素的 content 必须是非空字符串（哪怕只是 ''），且 background-color 必须显式指定——它无法自动继承父级颜色；而 box-shadow 虽然简单，但在深色背景+浅色阴影组合下，rgba() 的 alpha 值稍有偏差就会让线条“消失”。
