hr标签是HTML中用于表示主题分隔的自闭合标签，默认显示为灰色水平线，语义上标识内容主题变化，提升可访问性；通过CSS可自定义样式，如改变颜色、高度、边框，实现实线、渐变、虚线、阴影等效果，并可通过设置width、margin等属性优化响应式布局中的显示，增强页面结构清晰度与视觉表现力。
在HTML中，hr 标签用于表示内容中的主题分隔线，也就是常说的水平分割线。它是一个自闭合标签，无需结束标签，常用于分隔文章段落、章节或不同区块内容，使页面结构更清晰。
基本用法
hr 标签默认会在浏览器中渲染为一条灰色的水平线。使用非常简单：
这样就会在页面上插入一条默认样式的分割线。无需任何属性即可生效，兼容所有现代浏览器。
语义化作用
除了视觉上的分隔，hr 在语义上也代表了段落级别内容的主题变化。例如，在一篇文章中切换话题时使用 hr，比单纯用 CSS 画一条线更具可访问性，屏幕阅读器能识别其语义意义。
立即学习“前端免费学习笔记（深入）”；
自定义样式技巧
虽然默认的 hr 样式较单调，但可以通过 CSS 轻松美化，实现各种视觉效果。
示例：改变颜色、高度和边框
hr {
height: 2px;
background-color: #007acc;
border: none;
}
说明：将默认边框去掉，设置高度和背景色，可得到一条简洁的蓝色实线。
进阶样式：渐变线条
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标签分割线样式自定义技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585268.html
微信扫一扫 
支付宝扫一扫 
