hr 是语义化分隔元素，表示主题或段落逻辑分隔，不可滥用为装饰或布局工具；应通过 css 安全重绘（如 background、border-radius），保留其可访问性与语义。
hr 在 HTML5 中不是“占位符”，而是有明确语义的元素：表示内容主题或段落之间的逻辑分隔。它本身不是为了被“替换为装饰图形”而设计的，但可以合法地用 CSS 重绘样式，前提是不破坏其语义和可访问性。
理解 hr 的语义角色
浏览器默认把 hr 渲染成一条线，但这只是表现；它的本质是告诉机器（和辅助技术）：“这里前后内容属于不同主题”。屏幕阅读器会读作 “horizontal rule”，所以不能把它当空白 div 乱用。
- 适合场景：文章章节切换、作者信息前、表单分组之间、博客正文与评论区交界处
- 不适合场景：仅为了撑开间距、做按钮下划线、在 flex 容器里强行换行、替代 margin/padding
- 滥用后果：影响 SEO 理解结构、干扰视障用户浏览节奏、响应式布局中易失效
用 CSS 安全重绘 hr 的视觉效果
HTML5 已废弃所有内联样式属性（如 width、color、noshade），必须用 CSS 控制外观。关键是要保留语义，只改视觉。
- 先清空默认边框：
border: none; - 再用 background 或 border 重建线条：
height: 2px; background: linear-gradient(to right, #f6d365, #fda085); - 控制尺寸与居中：
width: 80%; margin: 1.5em auto;（推荐用 em 单位，适配字体缩放） - 加圆角或透明度提升质感：
border-radius: 4px; opacity: 0.9;
避免常见陷阱
很多人想“用 hr 当画布”，结果踩坑：
- 不要给 hr 设
display: inline或float—— 它是块级元素，强行改变会破坏流式布局 - 不要在 flex 容器里依赖 hr 做分隔 —— 若父容器设了
flex-wrap: nowrap，hr 可能被压缩消失，应改用伪元素或带 class 的 div - 不要连续写多个 hr 来模拟虚线或点阵 —— 这是结构错误，该用
border-image或 SVG - 国际化项目中慎用左右渐变（如
to right）—— 阿拉伯语等 RTL 语言下方向反了，可用to end更安全
替代方案：何时不该用 hr
如果目标只是视觉分隔，且前后内容并无主题变化，就别用 hr：
- 卡片底部细线 → 用
div.card { border-bottom: 1px solid #eee; } - 导航项之间竖线 → 用
nav a:not(:last-child)::after { content: "|"; margin: 0 8px; } - 需要动画或交互的分隔 → 用
div.seperator+ CSS transition 或 SVG
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
