标准答案
- 移动端 1px 边框问题来自 DPR，也就是 CSS 像素和物理像素不一致。
- 在高 DPR 设备上，CSS 里的 1px 可能对应多个物理像素，所以视觉上比设计稿里的细线更粗。
- 常见方案是用伪元素画 1px 线，再用 transform: scaleY(0.5) 或 scaleX(0.5) 缩放。
- 也可以用 border-image、线性渐变，或者在特定 viewport 缩放方案里处理像素映射。
- 实际项目里不一定所有边框都要处理，只对关键细线做，避免为了视觉细节增加太多维护成本。
题目解析
这题本质是 DPR 问题，不是 CSS 真的不能画 1px。
部分现代浏览器支持 0.5px，但兼容性和渲染效果不完全一致，工程里仍常见伪元素方案。
代码示例
用伪元素和缩放可以模拟更细的底边框。
CSS
.hairline {
position: relative;
}
.hairline::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: #e4e8e2;
transform: scaleY(0.5);
transform-origin: bottom;
}常见误区
- 只说用 0.5px，不解释 DPR 和物理像素。
- 所有边框都上复杂方案，增加样式维护成本。
- 忘记伪元素需要定位上下文。