HTML画线方法与CSS技巧全解析

• 水平线：

  <div style="border-bottom: 1px solid #ccc;"></div>

• 垂直线（需设宽高+左右边框）：

  <div style="width: 1px; height: 20px; background: #ccc;"></div>

  （更推荐用 background 替代 border 避免盒模型计算）
• 虚线/点线直接改 border-style：border-bottom: 1px dashed #999 或 dotted

::after 伪元素画斜线或带长度控制的线

需要斜线（如对角分割）、或线长需精确匹配文字宽度时，::after 比单独 DOM 元素更干净。关键是利用 transform: rotate() 和 position: absolute 定位。

注意：旋转后元素的宽高是原始尺寸，不是视觉尺寸，所以 width/height 要按旋转前估算；用 transform-origin 控制旋转支点，否则线会偏出容器。

• 文字下方斜线示例：

  .line-text {
    position: relative;
  }
  .line-text::after {
    content: "";
    position: absolute;
    left: 0; bottom: 2px;
    width: 100%; height: 1px;
    background: #000;
    transform: rotate(-15deg);
    transform-origin: left bottom;
  }

• 避免伪元素撑开父容器：确保父元素有 position: relative，且伪元素设 pointer-events: none（防点击遮挡）

SVG 和 画任意曲线最精准

当需要贝塞尔曲线、弧线、或响应式缩放不失真时，SVG 是唯一可靠选择。 画直线极简， 画曲线靠 d 属性，语法虽略陡，但浏览器原生支持、抗锯齿好、可直接用 CSS 控制颜色/粗细。

容易踩的坑：SVG 默认有 viewBox，若没设或设错，线条可能被裁剪或缩放异常；另外， 的坐标是绝对像素值，响应式中建议用 vw/% 单位配合 preserveAspectRatio。

• SVG 直线（两点坐标）：

  <svg viewBox="0 0 100 20">
    <line x1="0" y1="10" x2="100" y2="10" stroke="#333" stroke-width="1"/>
  </svg>

• 三次贝塞尔曲线（C 命令）：

  <path d="M10,10 C30,5 70,15 90,10" stroke="#666" fill="none"/>

  （M 是起点，C 后四参数：两个控制点 + 终点）
• 不要把 SVG 写成内联样式——提取为独立文件或 ，利于复用和缓存

Canvas 动态画线适合交互场景，但别滥用

如果线要随鼠标移动、实时变形、或叠加动画（比如手绘效果），Canvas 是合理选择。但它的缺点也很明确：无法被 CSS 选择器控制、不支持文本选中、打印时可能模糊、SEO 不友好。

关键点在于 ctx.beginPath() 必须每次绘制前调用，否则多条线会连成路径；ctx.stroke() 后记得 ctx.closePath() 或重置状态，否则下次 stroke() 可能复用旧路径。

• 简单直线示例：

  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(80, 60);
  ctx.strokeStyle = '#f00';
  ctx.lineWidth = 2;
  ctx.stroke();

• Canvas 像素密度问题：高 DPI 屏幕下需手动缩放 canvas.width/canvas.height 并调整 ctx.scale()，否则线发虚
• 静态线优先用 CSS 或 SVG；Canvas 留给真正需要逐帧控制的场景

今天关于《HTML画线方法与CSS技巧全解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！