面试题：如何在网页中画一条 0.5px 的线？

这是一个与“1px 问题”紧密相关的经典移动端 CSS 面试题，考察对高分辨率屏幕渲染和 CSS 技巧的理解。

---

核心答案

在现代浏览器中，可以直接使用 border 或 height 设置为 0.5px 来绘制一条 0.5px 的线。主流现代浏览器（Chrome, Safari, Firefox）已支持小数像素值，并能在高 DPR（Device Pixel Ratio）设备上将其渲染为 1 个物理像素，从而实现清晰的细线效果。

/* 方法一：使用 border */
.hairline-border {
    border-top: 0.5px solid #ddd;
}

/* 方法二：使用 height */
.hairline-height {
    height: 0.5px;
    background-color: #ddd;
}

---

详细解决方案

✅ 方案一：直接使用 0.5px (现代推荐)

• 原理：在 DPR=2 的设备上，1 个 CSS 像素对应 2×2 个物理像素。0.5px 的边框或高度正好可以精确地占据 1 个物理像素的宽度/高度，从而显示为最细的清晰线条。
• 优点：
  • 代码最简洁。
  • 语义清晰。
  • 现代浏览器支持良好。
• 缺点：
  • 在部分老旧的 Android 浏览器（如 UC、QQ 浏览器旧版）中，0.5px 可能被忽略或四舍五入为 1px。

✅✅ 方案二：使用 transform: scale() (兼容性最佳)

这是最经典、兼容性最好的方案，适用于所有需要支持老版本浏览器的场景。

.scale-line {
    position: relative;
    height: 1px; /* 视觉上的 1px，在 DPR=2 下实际是 2px 物理像素 */
    background-color: #ddd;
    /* 或者用伪元素 */
}

/* 推荐使用伪元素，避免影响原元素尺寸 */
.scale-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    transform: scaleY(0.5); /* 在 Y 轴上缩小到 50% */
    transform-origin: 0 0; /* 设置缩放原点 */
}

• 原理：
  1. 创建一个 1px 高的元素（在 DPR=2 设备上占 2 个物理像素）。
  2. 使用 transform: scaleY(0.5) 将其在垂直方向上缩小一半。
  3. 结果：视觉高度变为 0.5px，并精确占据 1 个物理像素，清晰锐利。
• 优点：兼容性极好，支持到非常老的移动端浏览器。
• 缺点：代码相对复杂，需要处理定位和 transform-origin。

✅ 方案三：使用渐变背景 (linear-gradient)

利用 CSS 渐变创建一条精细的线。

.gradient-line {
    height: 1px;
    background: linear-gradient(180deg, transparent, #ddd, transparent);
    /* 或者更精确地控制 */
    background: linear-gradient(180deg, rgba(0,0,0,0) 49%, #ddd 50%, rgba(0,0,0,0) 51%);
}

• 优点：纯 CSS，无需额外元素。
• 缺点：颜色过渡可能不够锐利，在某些设备上可能出现模糊或锯齿。

✅ 方案四：使用 SVG

通过内联 SVG 绘制一条精确的 0.5px 线条。

.svg-line {
    height: 0.5px;
    background: url("data:image/svg+xml,%3csvg viewBox='0 0 100 1' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='0.5' x2='100' y2='0.5' stroke='%23ddd' stroke-width='1'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
}

• 优点：矢量图形，无限清晰，可精确控制。
• 缺点：代码冗长，可维护性差。

✅ 方案五：使用 border-image

结合 border-image 和 SVG 或渐变。

.border-image-line {
    border-top: 0.5px solid transparent;
    border-image: linear-gradient(180deg, transparent, #ddd, transparent) 1;
}

• 优点：灵活性高。
• 缺点：语法稍复杂。

---

如何选择？

方案	推荐度	适用场景
0.5px 直接设置	✅✅✅	现代 Web 应用，目标用户使用主流现代浏览器。
transform: scale()	✅✅✅✅	需要兼容老旧移动端浏览器的项目。
渐变背景	✅✅	简单线条，追求纯 CSS 解决方案。
SVG / border-image	✅	需要极致清晰度或复杂样式的场景。

---

面试加分点

1. DPR 概念：能解释 0.5px 在 DPR=2 的设备上对应 1 个物理像素。
2. devicePixelRatio：提到 window.devicePixelRatio 可以获取设备的 DPR。
3. 可访问性：指出过细的线条在低分辨率屏幕或视力不佳的用户看来可能难以看清。
4. 性能：transform 和 background 方案性能良好，SVG 内联不影响网络请求。
5. 框架工具：提及一些 UI 库（如 Ant Design Mobile）内部使用 transform: scale() 来实现 hairline 边框。

---

总结回答示例

在现代浏览器中，可以直接使用 border: 0.5px solid #ddd 或 height: 0.5px 来画一条 0.5px 的线，它会在高 DPR 设备上渲染为 1 个物理像素，非常清晰。

如果需要兼容老旧的移动端浏览器，最可靠的方案是使用 transform: scaleY(0.5) 对一个 1px 高的元素进行缩放。此外，CSS 渐变、SVG 背景也是可行的替代方案。

我通常会根据项目的浏览器兼容性要求来选择：现代项目首选 0.5px，需要广泛兼容的项目则使用 transform 方案。