最轻量纯css画线方案是border，水平线用border-bottom，垂直线推荐background替代border以避免盒模型干扰；斜线用::after伪元素配合transform；高精度曲线用svg；动态交互线用canvas。
用 border 画水平/垂直线最轻量
纯 CSS 画线，border 是最快、最兼容的方案，尤其适合分隔线、下划线这类场景。它不依赖内容、不触发重排，渲染开销几乎为零。
常见错误是给空
height: 0 后加 border-bottom——这没问题；但若设了 padding 或 margin，线位置容易偏移，调试时建议先清掉所有盒模型干扰。
- 水平线：
- 垂直线（需设宽高+左右边框）：
（更推荐用
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 直线（两点坐标）：
- 三次贝塞尔曲线（C 命令）：
（
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 留给真正需要逐帧控制的场景
CSS 的 border 和伪元素适合大多数布局线，SVG 保证精度和缩放，Canvas 仅在动态逻辑不可替代时启用。最容易被忽略的是 SVG 的 viewBox 与 Canvas 的设备像素比适配——这两处出问题，线要么看不见，要么糊成一片。