如何在网页中画一条 0.5px 的线？

使用 transform 属性

可以通过 transform 属性将 1px 的线缩放为 0.5px。例如：

<div class="half-pixel-line"></div>

<style>
.half-pixel-line {
  width: 100%;
  height: 1px;
  background-color: black;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
</style>

在这个例子中，我们创建了一个 1px 高的黑色线条，然后使用 transform: scaleY(0.5); 将其高度缩放到 0.5px。

使用 border 属性和 transform

另一种方式是使用 border 属性加上 transform，以实现 0.5px 的效果：

<div class="half-pixel-border"></div>

<style>
.half-pixel-border {
  width: 100%;
  border-top: 1px solid black;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
</style>

在这个示例中，我们使用 border-top 创建了一条 1px 的线，然后通过 transform: scaleY(0.5); 将其缩小为 0.5px。

使用 SVG

SVG 可以精确地控制线条宽度，支持小于 1px 的宽度。这是实现 0.5px 线条的最精确的方法：

<svg width="100%" height="1" style="display: block;">
  <line x1="0" y1="0" x2="100%" y2="0" stroke="black" stroke-width="0.5"/>
</svg>

在这个例子中，我们使用了 <line> 元素，并设置了 stroke-width="0.5" 来绘制一条 0.5px 的线。

使用 box-shadow 模拟

可以使用 box-shadow 来模拟 0.5px 的线条：

<div class="box-shadow-line"></div>

<style>
.box-shadow-line {
  width: 100%;
  height: 0;
  box-shadow: 0 0.5px 0 black;
}
</style>

通过设置 height: 0; 和 box-shadow 的 0 0.5px 0 black，我们可以得到一条看起来是 0.5px 高的线。

总结

在选择如何绘制 0.5px 线时，应该考虑到各浏览器的渲染差异以及具体的使用场景。SVG 是最精确的方式，而 transform 和 box-shadow 则是更通用的方法，适用于大多数现代浏览器。