HTML5用hr标签或CSS画直线分隔内容块

2、为其添加内联样式或外部CSS类，例如style="border-top: 1px solid #333;"。

3、若需仅显示部分长度，可配合width、margin-left或max-width限制显示范围。

三、使用CSS伪元素::before或::after绘制定制化直线

利用伪元素可在不增加HTML结构的前提下生成线条，适用于标题下方装饰线、卡片分割线等设计需求。

1、为目标元素（如h2）添加position: relative;。

2、使用::after伪元素设置content: ""; display: block; width: 100%; height: 1px; background: #666;。

3、通过transform: translateY()或top值调整线条垂直位置，避免影响原有布局流。

四、使用SVG的元素绘制精确坐标直线

SVG提供像素级控制能力，适合需要斜线、虚线、渐变色或响应式缩放的直线场景。

1、插入

2、在其中添加#007bff" stroke-width="1"/>。

3、确保父容器有明确宽度，或使用viewBox适配响应式环境。

五、使用CSS linear-gradient背景绘制多样式直线

借助background-image的渐变函数，可生成双色分界线、带透明过渡的细线，或嵌入图标符号的复合分割线。

1、为一个高度为1px的空div设置background-image: linear-gradient(to right, #ccc, #ccc);。

2、通过重复渐变或color-stop控制起始/结束颜色，例如linear-gradient(to right, transparent 40%, #000 40%, #000 60%, transparent 60%);可生成居中粗线。

3、结合background-size与background-repeat实现点线、虚线效果，无需额外图片资源。

本篇关于《HTML5用hr标签或CSS画直线分隔内容块》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！