移动端 1px 边框问题的几种解法与取舍

在 2 倍、3 倍屏上写 border: 1px solid #ddd，实际渲染出来会变粗，设计稿上的细线在真机上像一条粗边。这个问题几乎每个做移动端的都遇到过。

方案一：transform scale

用伪元素画一条 1px 的线，再缩放 0.5。兼容性好，但圆角处理麻烦，且元素本身不能用 overflow:hidden 之外的方式。

.hairline {
  position: relative;
}
.hairline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ddd;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
@media (-webkit-min-device-pixel-ratio: 3) {
  .hairline::after { transform: scaleY(0.333); }
}

方案二：box-shadow

box-shadow: 0 0 0 0.5px #ddd，写法简单，但不支持圆角跟随，且部分安卓机型渲染有毛边。

方案三：0.5px 直接写

iOS 8+ 和大部分现代安卓支持，但老安卓会直接忽略或渲染成 1px，兼容性不稳。

怎么选

• 项目要兼容老设备：用 scale 方案，稳定
• 只做 iOS / 现代浏览器：0.5px 最省事
• 圆角边框：scale 方案配合 border-radius 一起缩放，或者用 SVG

没有银弹，看项目兼容要求选。我个人倾向 scale，虽然代码多一点，但可控。