hr是表示内容主题切换的语义分隔符，非画线工具；加height无效因浏览器默认border:1px inset会覆盖样式，须先设border:none才能使height或background生效。
hr 不是画线工具，而是表示内容主题切换的语义分隔符；直接改 height 或 color 通常无效，因为浏览器默认边框会覆盖样式。
为什么 hr 加了 height 还是没变粗？
多数浏览器给 hr 设置了 border: 1px inset（比如 Chrome、Firefox），这个默认边框会压住你设的 height 和 background-color，导致样式“不生效”。
- 必须显式写
border: none或border: 0才能清掉它 - 清完之后，
height+background-color才真正起作用 - 某些浏览器（如 Safari）对
border-top的渲染更稳定，推荐优先用它
用 border-top 还是 background 实现线条？
两种方式都可行，但适用场景不同：
-
border-top: 2px solid #4a90e2：简单、兼容性好、无高度歧义；配合height: 0避免意外撑高 -
background-image: linear-gradient(...)：支持渐变、图案、透明过渡；但必须配height（不能为0），且background-color会被覆盖 - 避免混用：比如同时设
border-top和background，容易视觉重叠或逻辑混乱
hr 能不能当装饰线随便用？
不能。它的语义是“主题分隔”，比如章节切换、视角转换、话题转折——屏幕阅读器会播报“分隔”，搜索引擎也会据此理解内容结构。
- 滥用在纯视觉装饰位置（如卡片底部、按钮下方），会破坏可访问性和语义逻辑
- 若只是需要一条线做装饰，用
<div style="border-bottom: 1px solid #eee"></div>更合适 -
hr不应嵌套在<p></p>内，也不该用来替代 margin/padding 布局
真正难的不是写对 CSS，而是判断该不该用 hr：先问一句“这里是否发生了内容主题的实质性变化”，再决定是不是它该出场的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
