【HTML】在页面中画一条0.5px的线

xixixin_2025-08-15 8:44

方案1：transform: scaleY()

css 复制代码

.line {
  height: 1px;
  background: black;
  /* 先画 1px 的线，再用 scaleY(0.5) 垂直压缩为 0.5px */
  transform: scaleY(0.5);
  /* 避免模糊 */
  transform-origin: 0 0;
}

方案2：border + transform

css 复制代码

.line {
  border-bottom: 1px solid black;
  transform: scaleY(0.5);
  /* 避免模糊 */
  transform-origin: 0 0;
}

这个方案可以给上下左右任意方向添加极细边框

方案3：线性渐变

css 复制代码

.line {
  height: 1px;
  background: linear-gradient(to bottom, black 0%, black 50%, transparent 50%);
}

方案4：SVG

html 复制代码

<svg height="1" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0.5" x2="100%" y2="0.5" stroke="black" stroke-width="0.5"/>
</svg>