HTML如何插入水平线_HTML hr标签水平线样式自定义方法

新闻中心 NEWS CENTER

2025-10-13

浏览次数：次

使用标签可插入水平线，通过CSS自定义样式如颜色、高度、宽度和边框类型，实现美观的页面分隔效果。

html如何插入水平线_html hr标签水平线样式自定义方法

在HTML中插入水平线，最简单的方法是使用 hr 标签。这个标签会创建一条分隔内容的水平线，默认样式由浏览器决定。但你可以通过CSS来自定义它的颜色、高度、宽度、边框和对齐方式，让页面更美观。

直接使用 <hr> 标签即可插入一条水平线：

<hr>

这会在两个段落或区块之间添加一条灰色细线，常用于文章分隔、章节过渡等场景。

你可以在 <hr> 标签中加入 style 属性，快速设置样式：

<hr style="border: 1px solid red; margin: 20px 0;">

秀脸FacePlay

一款集成AI换脸、照片跳舞等多种AI特效玩法的App

124 查看详情秀脸FacePlay

常见可设置的CSS属性包括：

如果网页多处使用水平线，推荐定义CSS类，便于维护：

<style>
.custom-hr {
  border: 0;
  height: 2px;
  background-color: #333;
  width: 80%;
  margin: 20px auto;
}
</style>

<hr class="custom-hr">

这种方法可以实现：

通过修改 border-style 可以实现不同视觉效果：

<hr style="border-top: 2px dashed #ccc;">

常用 border-style 值：

基本上就这些。用好 hr 标签加上一点CSS，就能让页面结构更清晰，视觉更舒适。关键是根据设计需求调整颜色、粗细和间距，避免生硬的默认样式。

以上就是HTML如何插入水平线_HTML hr标签水平线样式自定义方法的详细内容，更多请关注其它相关文章！