js 横线 实现

使用 CSS border 属性实现横线

在 HTML 中创建一个 div 元素，通过 CSS 的 border 属性设置横线样式

<div class="horizontal-line"></div>

.horizontal-line {
  border-bottom: 1px solid #000;
  width: 100%;
}

使用 HTML hr 标签实现横线

HTML 提供了专门的 hr 标签用于创建水平分割线

<hr>

可以通过 CSS 自定义样式

hr {
  border: 0;
  height: 1px;
  background-color: #ccc;
}

使用 SVG 实现自定义横线

SVG 可以实现更复杂的横线效果

<svg width="100%" height="10">
  <line x1="0" y1="5" x2="100%" y2="5" stroke="#000" stroke-width="1" />
</svg>

使用伪元素实现横线

通过 ::before 或 ::after 伪元素创建横线

.element::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #000;
}

使用 Canvas 绘制横线

JavaScript 动态绘制横线

<canvas id="lineCanvas"></canvas>

const canvas = document.getElementById('lineCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(canvas.width, 50);
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
ctx.stroke();