📏 1px 边框问题

在 Retina（2x/3x）屏幕上，CSS 的 1px 实际渲染为 2~3 个物理像素，导致边框看起来比设计稿粗。

解决方案汇总

方案原理适用场景
transform: scale() 用伪元素画边框，transform 缩放 0.5 最通用，推荐
viewport + rem 根据 DPR 动态设置 viewport 缩放 全页面适配
box-shadow 用阴影模拟细边框 简单场景
border-image / svg 使用图片边框 复杂边框

推荐方案：伪元素 + transform

/* ===== 1px 细边框（最通用方案）===== */

/* 底部 1px 边框 */
.hairline-bottom {
  position: relative;
}
.hairline-bottom::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: #e0e0e0;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

/* 四边 1px 边框 */
.hairline-border {
  position: relative;
}
.hairline-border::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 200%; height: 200%;
  border: 1px solid #e0e0e0;
  border-radius: inherit;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;  /* 不阻挡点击 */
}

/* 使用 CSS 变量适配不同 DPR */
@media (-webkit-min-device-pixel-ratio: 3) {
  .hairline-bottom::after {
    transform: scaleY(0.333); /* 3x 屏 */
  }
}
⚠️ 注意

使用 transform: scale() 后，伪元素的 border-radius 也会被缩放。如果需要圆角边框，确保父元素设置 border-radius 且伪元素继承。