直接写 border: 1px 在 iphone 或高 dpr 安卓机上必然变粗，是因浏览器将 1 css 像素映射为 2 或 3 物理像素；真正能落地的解法只有伪元素 + 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: 0.5px 不行
看似最直觉，但实际几乎不可用：border-width: 0.5px 在 iOS Safari 13+ 才开始有限支持，旧版安卓 WebView（尤其 Android 4.4–6.0 的系统 WebView）直接忽略，渲染为 0；即使识别了，抗锯齿也会让线条发虚、边缘模糊。更麻烦的是，它无法通过 CSS 变量或继承动态控制颜色，必须每个地方硬写。
- 测试时用
document.createElement('div').style.border = '0.5px solid #000'+offsetHeight判断是否生效，但线上环境无法保证所有用户都走同一路径 - 不能和
border-radius共存——圆角会截断 0.5px 边框，视觉断裂 - 一旦用了
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)替代
示例（底部单边）：
.line-bottom {
position: relative;
}
.line-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ddd;
transform: scaleY(0.5);
transform-origin: 0 100%;
}
box-shadow 适合哪些场景
它不改变布局流、不触发重排、无缩放副作用，但只适用于单向、轻量分隔线，比如列表项之间、输入框下划线、卡片分割线。
- 写法是
box-shadow: 0 1px 0 rgba(0,0,0,.12)，其中1px是物理像素值，在 dpr=2 设备上正好占 1 物理像素 - 颜色会轻微发虚，深色背景上更明显；浅灰线（如
#eee）建议改用#ddd提升对比度 - 不能同时存在真实
box-shadow，否则会叠加；若必须，得合并写法，例如box-shadow: 0 1px 0 #ccc, 0 2px 4px rgba(0,0,0,.1) - 不支持圆角边框——阴影无法跟随
border-radius弧度，拐角处会露白或错位
示例（列表分割）：
.list-item {
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
border-image 的维护成本在哪
它是唯一真正“物理 1px”的方案，但开发阶段要生成多套图像（dpr=2/3/4），上线后换色、换粗细都得重新出图，适合对一致性要求极高且人力充足的项目。
-
border-image-slice必须设为1（不是1px），否则图像会被拉伸或截断 - 图像必须是 1px 高、横向平铺的 PNG，透明通道要干净，否则边缘有杂边
- 必须显式写
border-width: 1px，否则 fallback 到普通border，失去意义 - 媒体查询要覆盖全：除了
@media (-webkit-min-device-pixel-ratio: 2)，还得加@media (min-resolution: 192dpi)兼容 Firefox 和新 Edge
真正在意像素精度又不怕维护成本的团队，才会选这条路。其他人，老实用 ::after + scaleY(0.5) 就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
