hr改height无效是因为浏览器user agent stylesheet默认设border: 1px inset，视觉高度由border决定；必须先写border: none，再用background或border-top重绘，并以margin控制间距。
hr 不是画线工具，是语义化分隔符；直接改 color 或 height 常无效，必须先清默认边框。
为什么 hr 改 height 没反应？
因为浏览器对 hr 有 user agent stylesheet 预设：多数引擎（Chrome、Firefox）默认设了 border: 1px inset，此时 height 被忽略，视觉高度由 border 决定。不显式清除 border，任何基于盒模型的调整都会失效。
必须做这三件事：
-
border: none—— 强制移除所有边框（不能只写border-top: none） - 选一种绘制方式：
background（推荐）或border-top - 用
margin控制上下间距，别依赖padding（hr是替换元素，padding无效）
background vs border-top：哪种更适合 1px 实线？
background 更稳，尤其在高 DPI 屏、缩放 125% 或暗色模式下不会虚化或错位；border-top 在 Safari 里偶有 1px 渲染抖动。
用 background 的写法（兼容 IE11+）：
hr {
border: none;
height: 1px;
background: #e0e0e0;
margin: 24px 0;
}
用 border-top 的写法（注意陷阱）：
- 别设
height，否则总高度 =height + border-width，导致布局偏移 - 写成
border: 0; border-top: 1px solid #e0e0e0;，再配margin - 若需响应式细线，用
rem单位：height: 0.0625rem;（1px = 0.0625rem @16px base）
虚线、渐变、居中短横线怎么写才不出错？
虚线别用 border-style: dotted——Safari 点距不可控，且在 Windows 高对比度模式下可能消失。改用 background-image：
hr {
border: none;
height: 2px;
background-image: repeating-linear-gradient(
to right,
#999,
#999 2px,
transparent 2px,
transparent 4px
);
margin: 16px 0;
}
渐变线要配 height 和 background-size，否则平铺成条纹：
-
height: 4px是基础 background: linear-gradient(to right, #ff6b6b, #4ecdc4);- 加
background-size: 100% 100%;防止重复
居中短横线（如标题下方）必须加 width + margin: 0 auto，且 display: block（hr 默认就是 block，但某些重置 CSS 可能干扰）。
什么时候不该用 hr？
当线条只是装饰、不表示主题分隔时，比如段落末尾的小横线、卡片底部边框、表单字段分隔——这些用 div + border-bottom 或伪元素更合理。
hr 的语义是“内容主题变化”，滥用会破坏可访问性（屏幕阅读器会 announce “horizontal rule”），也影响 SEO 结构识别。真正难的不是画出那条线，而是判断它该不该存在、在哪儿断、断得是否符合内容逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
