HTML如何插入水平线_HTML hr标签水平线样式自定义方法-html教程-PHP中文网

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

爱谁谁

发布： 2025-10-13 20:34:01

原创

281人浏览过

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

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

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

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

<hr>

登录后复制

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

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

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

登录后复制

常见可设置的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;">

登录后复制

稿定AI设计

AI自动去水印、背景消除、批量抠人像工具

常用 border-style 值：

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

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

大家都在看：