直接写 height 或 color 没效果是因为浏览器默认 border: 1px inset 会覆盖这些样式，必须先写 border: none 且置于最前；推荐用 border-top 实现实线/虚线/双线，或用 background + height + overflow: hidden 实现渐变与精确控制。
为什么直接写 height 或 color 没效果
因为所有主流浏览器都给 hr 设了默认边框：border: 1px inset（或类似值），它会压住你写的 height、background-color，甚至让 color 完全不生效。不是 CSS 写错了，是样式根本没机会渲染。
必须先写 border: none（或 border: 0），且必须放在最前面——不能只写 border-top: none，也不能靠 border-style: none 替代。
- Firefox 和 Safari 在未清边框时，
height: 1px+background可能完全不可见 - 旧版 Safari 对
height+background组合支持不稳定，建议加display: block - 写了
border-top却没清默认边框，大概率出现双线：一条浅灰内凹线 + 你设的实线
border-top 方案：适合实线/虚线/双线
这是最轻量、兼容性最好的路径，尤其适合 IE11、旧版 Safari 和打印场景。核心是把它当“描边”用，而非“填充”。
正确写法：
hr {
border: none;
border-top: 2px dashed #666;
margin: 1.5rem 0;
}
-
border-top不支持linear-gradient或box-shadow，别强行加，会被截断或忽略 - 要虚线？用
dashed；点线慎用dotted——Safari 点距不可控，高对比度模式下可能消失 - 双线直接写
border-top: 3px double #999，比伪元素更稳 - 别设
height配border-top，Firefox 会坚持画两条线
background 方案：适合渐变/精确 1px/暗色模式适配
当你需要渐变、纯色细线（如物理像素级 1px）、或确保在暗色模式/高缩放下不失真，background 是唯一可靠选择。
典型写法：
hr {
border: none;
height: 0.125rem; /* = 2px @16px base，比 px 更稳 */
background: linear-gradient(90deg, #3498db, #2ecc71);
overflow: hidden;
margin: 1.5rem 0;
}
-
overflow: hidden必须加，否则渐变边缘可能模糊或溢出 - 响应式粗细用媒体查询控制
height，比如@media (max-width: 768px) { hr { height: 0.0625rem; } } - 打印时
border-top常被忽略，但background+height输出更可靠 - 避免混用
border-top和background，Firefox 可能真给你画两条线
居中、宽度和间距的坑
hr 是替换元素，padding 对它无效，所有视觉留白只能靠 margin 控制；width 在 Flex/Grid 容器里行为极不稳定，别碰。
- 居中统一用
max-width: 600px; margin: 1.5rem auto，窄屏不会溢出 - 高度单位优先用
rem，比如height: 0.125rem，缩放时更稳定 - 如果全局用了
box-sizing: border-box，给hr显式加box-sizing: content-box，否则margin可能塌陷 - 父容器有
padding时，hr默认撑满，无需额外处理宽度
真正难的不是调出某一种线型，而是让 hr 在用户开启暗色模式、系统字体放大、Retina 屏缩放 125%、甚至屏幕阅读器遍历时，依然语义清晰、视觉稳定——这些没法靠单条 CSS 解决，得靠 rem + @media + 语义校验组合推进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
