HTML水平分割线hr用法_HTML hr标签分割线样式自定义技巧-html教程-PHP中文网

HTML水平分割线hr用法_HTML hr标签分割线样式自定义技巧

絕刀狂花

发布： 2025-10-16 15:11:01

原创

648人浏览过

hr标签是HTML中用于表示主题分隔的自闭合标签，默认显示为灰色水平线，语义上标识内容主题变化，提升可访问性；通过CSS可自定义样式，如改变颜色、高度、边框，实现实线、渐变、虚线、阴影等效果，并可通过设置width、margin等属性优化响应式布局中的显示，增强页面结构清晰度与视觉表现力。

html水平分割线hr用法_html hr标签分割线样式自定义技巧

在HTML中，hr 标签用于表示内容中的主题分隔线，也就是常说的水平分割线。它是一个自闭合标签，无需结束标签，常用于分隔文章段落、章节或不同区块内容，使页面结构更清晰。

hr 标签默认会在浏览器中渲染为一条灰色的水平线。使用非常简单：

<hr>

这样就会在页面上插入一条默认样式的分割线。无需任何属性即可生效，兼容所有现代浏览器。

除了视觉上的分隔，hr 在语义上也代表了段落级别内容的主题变化。例如，在一篇文章中切换话题时使用 hr，比单纯用 CSS 画一条线更具可访问性，屏幕阅读器能识别其语义意义。

虽然默认的 hr 样式较单调，但可以通过 CSS 轻松美化，实现各种视觉效果。

示例：改变颜色、高度和边框

说明：将默认边框去掉，设置高度和背景色，可得到一条简洁的蓝色实线。

标贝科技

标贝科技-专业AI语音服务的人工智能开放平台

进阶样式：渐变线条

hr {
  height: 5px;
  background: linear-gradient(to right, #ff7a7a, #a86ef1, #4ecdc4);
  border: none;
}

虚线或点线风格：

hr {
  height: 1px;
  border: 0;
  border-top: 2px dashed #999;
}

带阴影或立体感：

hr {
  height: 1px;
  background: #ddd;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

在移动端或不同宽度容器中，可通过设置 margin 和 max-width 来优化显示效果：

hr {
  width: 80%;
  margin: 20px auto;
  height: 1px;
  background: #ccc;
  border: none;
}

这样可以让分割线居中，并在小屏幕上保持适当间距。

基本上就这些。合理使用 hr 标签并结合 CSS 自定义，既能提升页面可读性，也能增强视觉设计表现力。不复杂但容易忽略细节。

以上就是HTML水平分割线hr用法_HTML hr标签分割线样式自定义技巧的详细内容，更多请关注php中文网其它相关文章！

大家都在看：