如何画一条0.5px的线

1. transform: scaleY(0.5)（最常用）

.line {
  height: 1px;
  background: #000;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

原理：先画 1px，再缩小一半，视觉上是 0.5px。

---

2. pseudo element + scale（不影响布局）

.box {
  position: relative;
}

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

---

3. meta viewport 缩放（影响全局，慎用）

<meta name="viewport" content="width=device-width, initial-scale=0.5" />

---

4. box-shadow

.line {
  box-shadow: 0 0.5px 0 #000;
}

部分浏览器支持亚像素 shadow。

---

方案对比

方案	兼容性	推荐度
scaleY(0.5)	最好	✅ 首选
伪元素 + scale	好	✅ 推荐
box-shadow	一般	可用
viewport 缩放	影响全局	❌ 不推荐

---

首选方案：伪元素 + scaleY(0.5)，不影响布局且兼容性好。