<hr />是HTML语义化分隔线标签，默认渲染为带阴影的浅灰色块级元素；需用CSS重置样式（如border-top和margin）控制外观，避免语义误用与显示异常。
怎么用 <hr> 加分隔线？基础写法和默认行为
<hr> 是 HTML 原生的水平分隔线标签，语义上表示主题或内容的分界，不是装饰性元素。浏览器默认会渲染为一条浅灰色、带阴影的细线，上下有外边距（margin），且自动换行（块级）。
- 直接写
<hr>即可生效，无需闭合（HTML5 中是自闭合标签） - 不要把它当“画线工具”滥用——比如在导航里强行塞
<hr>分隔菜单项，语义错位容易被屏幕阅读器误读 - 默认样式在不同浏览器略有差异（如 Chrome 的阴影比 Firefox 明显），所以实际项目中几乎总要重置样式
怎么用 CSS 控制 <hr> 的粗细、颜色和间距？
现代做法是清除默认样式，再用 border 或 background 重新定义。关键点在于：别碰 height（它对 <hr> 无效），改 border-top 或 margin。
- 最稳妥写法：
hr { border: none; border-top: 2px solid #333; margin: 1.5rem 0; } - 想加渐变或虚线？用
border-image或background更可控，例如：background: linear-gradient(90deg, #000, transparent 50%, #000); - 如果父容器用了
display: flex，<hr>可能被拉伸变形，加align-self: center;或包裹一层<div>
为什么有时 <hr> 不显示？常见隐形坑
不是代码没写，而是被其他样式“吃掉”了。几个高频原因：
-
color或background-color和父容器一致（比如深色背景+默认浅灰线 → 看不见） - 父元素设置了
overflow: hidden，而<hr>的默认margin被裁剪 - CSS 重置库（如 Normalize.css）可能把
border设为0，但没补回视觉样式 - 用在表格单元格（
<td>）里时，部分老浏览器不支持<hr>，建议改用border-bottom
替代方案：不用 <hr> 怎么实现分隔效果？
当需要精确控制、响应式缩放或动画时，纯 CSS 方案更灵活：
立即学习“前端免费学习笔记（深入）”；
- 空
<div>+border-bottom：适合段落末尾，语义中性，易配合 Flex/Grid -
::after伪元素：例如给<section>自动加底部线，避免 DOM 冗余 - SVG
<line>：适合需要斜线、波浪线等复杂形状的场景，但语义弱，需加aria-hidden="true" -
绝对定位的细
<div>：适合卡片间悬浮分隔线，但脱离文档流，需手动管理高度
真正难的不是画一条线，而是决定它该出现在哪、承担什么角色、是否该被辅助技术感知——这些细节决定了用户是“看到分隔”，还是“理解结构”。
