html 如何画线_HTML绘制直线或曲线的CSS技巧【详解】

最轻量纯css画线方案是border，水平线用border-bottom，垂直线推荐background替代border以避免盒模型干扰；斜线用::after伪元素配合transform；高精度曲线用svg；动态交互线用canvas。

用 border 画水平/垂直线最轻量

纯 CSS 画线，border 是最快、最兼容的方案，尤其适合分隔线、下划线这类场景。它不依赖内容、不触发重排，渲染开销几乎为零。

常见错误是给空 <div> 设 <code>height: 0 后加 border-bottom——这没问题；但若设了 padding 或 margin，线位置容易偏移，调试时建议先清掉所有盒模型干扰。

• 水平线：

  <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 控制旋转支点，否则线会偏出容器。

立即学习“前端免费学习笔记（深入）”；

DoMore.ai

DoMore.ai 是一个个性化的 AI 工具目录

下载

• 文字下方斜线示例：

  .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 <line></line> 和 <path></path> 画任意曲线最精准

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

容易踩的坑：SVG 默认有 viewBox，若没设或设错，线条可能被裁剪或缩放异常；另外，<line></line> 的坐标是绝对像素值，响应式中建议用 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 写成内联样式——提取为独立文件或 <symbol></symbol>，利于复用和缓存

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 留给真正需要逐帧控制的场景