hr颜色不生效是因为浏览器默认设置了border-bottom，必须先用border: none清除默认边框才能生效；推荐使用border-top或background方式重绘，二者需配齐三要素且各具优势。
hr颜色不生效，是因为没清掉默认边框
直接写 color 或 border-color 没反应，不是代码错，是浏览器默认给 hr 设了 border-bottom: 1px inset #999（或类似值），你改的样式被它盖住了。必须先显式清除，默认边框才让位。
- 用
border: none彻底清空，再重绘——这是最稳的起点 -
border: 0在部分旧环境里可能不完全清边框，优先用none - 别只写
border-color: red，没border-style就等于没激活边框，宽度和颜色全无效
用 border-top 控制粗细和颜色最兼容
这是目前最可靠、浏览器支持最广的方式，尤其适合实线、虚线、双线等基础样式。
- 写法必须带三要素：
border-top: 2px solid #333—— 缺一不可 - 不要混用
height和border-top，否则总高度 =height + border-top-width + border-bottom-width，容易撑开布局 - 虚线/点线直接换
border-style：border-top: 1px dashed #666、border-top: 2px double #000 - 注意：
size属性在 HTML5 中已废弃，Chrome/Firefox/Safari 全部忽略，写了也白写
用 background-color + height 更适合纯色细线
当你需要精确控制 1px 线、响应式缩放、或后续要加渐变/圆角时，这条路更可控。
- 必须配齐三件套：
border: none、height: 1px、background: #e0e0e0 -
overflow: hidden建议加上，防止某些浏览器渲染溢出（尤其配合border-radius时） - 想随字号缩放？用
height: 0.08em或height: clamp(1px, 0.1em, 2px)，但 IE 不支持clamp() - 加圆角：
border-radius: 2px，只对background方式有效；border-top方式加圆角会失效
内联 style 和全局 CSS 写法差异不大，但选择器权重要注意
无论写在 style 属性里还是 CSS 文件中，核心逻辑一样。真正影响效果的是选择器优先级和是否被其他规则覆盖。
- 内联样式优先级最高，适合单次快速调试：
<hr style="border: none; border-top: 3px solid #ff6b6b;"> - 全局写法推荐用类名，避免污染所有
hr：.section-divider { border: none; height: 2px; background: #333; } - 如果用了第三方 UI 库（如 Bootstrap），它可能自带
hr样式，得用更具体的选择器，比如article hr或加!important（仅调试用） - 别信
color属性能改线色——只有极老版本 IE 支持，现代浏览器里它只影响文字（而hr没文字）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
