CSS经典面试题——绘制一条0.5px的线

写这篇文章的原因是开发的时候下意识用width: 0.5px修改线的宽度，一下被同事点出来，太挫败了写这篇文章让自己记住。o(╥﹏╥)o

首先，要明确一下有哪几种线条，一般情况下用到的就是横线和竖线。

横线方案

1. transform: scale()进行放缩

.horizontal-line {
  width: 100px; /* 任意宽度 */
  height: 1px;
  background: black;
  transform: scaleY(0.5); /* 放缩至0.5倍 */
  transform-origin: top; /* 放缩基准点 */
}

2. 使用边框

.horizontal-line {
  width: 100px;
  border-top: 0.5px solid black;
}

3. 使用box-shadow阴影

.horizontal-line {
  width: 100px;
  box-shadow: 0 0.5px 0 0 black;
}

竖线方案

1. transform: scale()进行放缩

.vertical-line {
  height: 100px; /* 任意高度 */
  width: 1px;
  background: black;
  transform: scaleX(0.5); /* 放缩至0.5倍 */
  transform-origin: left; /* 放缩基准点 */
}

2. 使用边框

.vertical-line {
  height: 100px;
  border-left: 0.5px solid black;
}

3. 使用box-shadow阴影

.vertical-line {
  height: 100px;
  box-shadow: 0.5px 0 0 0 black;
}

大概就是这样了，可能日常用到的最多是transform: scale()的形式，下面总结一下，DeepSeek总结的，挺好的。

方案	适用场景	兼容性	备注
border: 0.5px solid	简单场景，现代浏览器	⭐⭐⭐	代码最少，但部分设备可能不生效
伪元素 + border	装饰性细线	⭐⭐⭐	不污染 DOM
transform: scale()	兼容性要求高	⭐⭐⭐⭐	最稳定，推荐
box-shadow	简单细线	⭐⭐⭐	适合短线条
linear-gradient	特殊需求（渐变）	⭐⭐	灵活性高，但代码稍多