CSS 如何实现 1px 边框效果？

Question

CSS 如何实现 1px 边框效果？

仓乃文 · Accepted Answer

在 Retina 高分辨率屏幕下，直接写 border: 1px 会显示为 2 物理像素，利用伪元素 + transform: scale() 可以实现真正的 1 物理像素边框。

```css
.hairline {
  position: relative;
}

.hairline::after {
  content: ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #e5e5e5;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
```

四边边框版本：
```css
.hairline-border::after {
  content: ";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #e5e5e5;
  transform: scale(0.5);
  transform-origin: 0 0;
}
```

补充说明：
- 核心原理：先放大 2 倍再缩小 0.5 倍，实现 0.5px 视觉效果
- 四边边框需要 width/height 设为 200%，否则缩放后尺寸不对
- 移动端 H5 页面常用此技巧解决 1px 边框问题
- 也可使用 viewport 方案：meta 标签设置 initial-scale=0.5