Canvas API、CSS border、CSS伪元素、CSS渐变背景和SVG line是五种绘制线条的方法：分别适用于动态交互、静态布局、斜线、响应式及矢量图形场景。
一、使用Canvas API绘制线条
Canvas是HTML5提供的位图绘图接口，通过JavaScript操作绘图上下文（context）可精确控制线条的起点、终点、颜色、粗细与样式。该方法适用于需要动态生成、交互式或动画化线条的场景。
1、在HTML中添加元素，并设置其id属性和宽高属性。
2、使用document.getElementById()获取canvas元素。
3、调用getContext('2d')获取2D绘图上下文对象。
立即学习“前端免费学习笔记（深入）”；
4、调用beginPath()开始新路径。
5、调用moveTo(x, y)设置线条起点坐标。
6、调用lineTo(x, y)设置线条终点坐标。
7、设置strokeStyle属性为所需颜色，例如ctx.strokeStyle = '#333'。
8、设置lineWidth属性指定线条粗细，例如ctx.lineWidth = 2。
9、调用stroke()实际绘制线条。
二、使用CSS border属性绘制水平或垂直线条
CSS border通过为块级元素设置单边边框实现线条效果，适合静态布局中分隔区域或装饰性线条，无需JavaScript参与，渲染性能高且语义清晰。
1、创建一个 2、为其设置 3、使用 4、使用 5、若需独立线条不依赖容器，可将元素设为 通过 1、选择目标容器元素，例如一个 2、为该元素添加 3、设置伪元素的 4、设置 5、应用 6、使用 利用 1、创建一个 2、设置 3、通过 4、设置 5、使用 SVG是基于XML的矢量图形标准， 1、在HTML中插入 2、在 3、设置 4、设置 5、设置 6、可选：添加width或height为0，避免占用额外空间。border-top绘制水平线，例如border-top: 1px solid #ccc。border-left绘制垂直线，例如border-left: 2px solid #007bff。display: block并清除内外边距。三、使用CSS伪元素绘制自定义方向线条
::before或::after伪元素配合transform: rotate()，可在任意角度绘制线条，适用于斜线、对角分割线等非正交需求。，并确保其position为relative。::before伪元素，并设置content: ''。position: absolute，并通过top、left定位起始点。width和height之一为0，另一为线条长度，例如width: 100px; height: 1px。background-color设定线条颜色，例如background-color: #e0e0e0。transform: rotate(45deg)调整线条角度，旋转中心默认为元素中心点。四、使用CSS渐变背景绘制线条
linear-gradient()作为background-image，可在元素上渲染一条极细的色带，本质是背景图像，适合响应式设计中保持线条比例一致。height: 1px）或使用padding预留空间。
background-image为linear-gradient(to right, #666, #666)，起止色相同以形成纯色线。background-size控制线条宽度，例如background-size: 100% 1px。background-repeat: no-repeat防止重复渲染。background-position微调线条垂直位置，例如background-position: bottom将其置于容器底部。五、使用SVG的
标签，并设定width和height属性。内添加x1、y1为起点坐标，x2、y2为终点坐标。stroke属性指定线条颜色，例如stroke="#28a745"。stroke-width控制粗细，例如stroke-width="1.5"。stroke-linecap="round"使端点呈圆角，或opacity="0.8"调节透明度。
