使用hr标签可快速插入默认横线,通过CSS border属性能自定义线条样式;结合CSS还可修改hr外观,实现多样化分隔线效果。

在HTML中设置横线,常用的方法有两种:使用 hr标签 和通过 CSS border属性 自定义线条。两种方式各有用途,适合不同场景。
1. 使用 hr 标签添加默认横线
hr 是 HTML 中专门用于表示主题分隔的水平线标签,使用简单,无需额外样式即可显示一条横线。
示例代码:浏览器会自动渲染一条灰色、宽度占满父容器、有一定高度的横线。你可以直接插入到段落之间作为内容分隔。
2. 用 CSS border 自定义横线样式
如果想更灵活地控制颜色、粗细、对齐或线型(如虚线),推荐使用CSS的 border 属性。
立即学习“前端免费学习笔记(深入)”;
常见做法是给一个 div 或 hr 添加下边框模拟横线。
示例代码:这种方式可以实现实线、虚线、双线等效果,也能精确控制上下边距和宽度。
3. 调整 hr 的样式(结合CSS)
虽然 hr 标签自带样式,但可以通过CSS重新定义其外观。
示例:修改 hr 颜色、高度和宽度这样可以让横线更符合网页整体设计风格。
4. 其他实用技巧
- 若只需短横线,可设置 width 控制长度
- 使用 border-top 或 border-bottom 在文字上方/下方加线
- 配合 :before 或 :after 伪元素实现装饰性线条
基本上就这些。用 hr 快速插入分隔线,用 CSS 实现个性化样式,两者结合能应对大多数页面布局需求。不复杂但容易忽略细节,比如清除默认边距或兼容性处理。根据实际需要选择合适方法就行。











