hr的height和background不生效，是因为浏览器默认border: 1px inset会覆盖自定义样式；必须先设border: none，再配合height+background或border-top实现稳定分割线。
hr 标签能插入分割线，但直接写 height 或 background-color 几乎肯定没效果——浏览器默认的 border: 1px inset 会把它盖住。
为什么 hr 的 height 和 background 不生效
几乎所有现代浏览器给 hr 预设了 border: 1px inset（或类似值），这个边框是“渲染优先级更高”的默认样式，会直接压掉你写的 height 和 background。
- 必须先写
border: none（或border: 0），否则其他样式等于白配 - 只写
height: 1px不够，border: none缺一不可 - 旧版 Safari 对
height + background-color组合支持不稳，建议加display: block -
padding对hr无效（它是替换元素），所有间距只能靠margin
用 border-top 还是 background 画线
取决于你要的是“线”还是“色带”，底层逻辑不同，混用容易出双线。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 要实线、虚线、点线：
border-top: 2px dashed #999更轻量，兼容性好；但注意dotted在 Safari 中点距不可控 - 要渐变、精确 1px 高度、暗色模式适配、打印输出：
height: 0.125rem; background: linear-gradient(...)是唯一稳的方案 - 别同时写
border-top和background，Firefox 可能真给你画两条线 - 响应式居中时，别用
width: 80%，窄屏易溢出；改用max-width: 600px; margin: 1.5rem auto
hr 的语义边界在哪
hr 表示主题级分隔，不是装饰线。滥用会干扰屏幕阅读器，也违背 W3C 定义。
- ✅ 正确场景：博客正文末尾与作者信息之间、章节切换处、对话轮次变更前
- ❌ 错误场景：按钮组之间、卡片 footer 下划线、评论列表项之间
- 这些地方更适合用
div+border-bottom或h2::after+border-bottom - 如果只是视觉分隔，CSS
border比hr更轻、更可控、不污染语义
真正难的不是让线“看起来对”，而是它在缩放 125%、暗色模式开启、用户强制放大字体、甚至屏幕阅读器遍历时，依然保持语义正确和视觉稳定——这得靠 rem 单位 + 媒体查询 + 显式 box-sizing: content-box 组合推进，单靠一个 CSS 规则解决不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
