hr标签样式不生效主因是未清除默认border，其“线”由border渲染而非height或color；须先设border:none，再用border-top或background重绘，避免属性冲突。
hr 标签的样式改不生效，大概率不是 CSS 写错了，而是没处理它的默认边框和盒模型行为。直接设 height 或 color 常常没反应，得先“清空”再重绘。
为什么直接改 color 或 height 没用？
因为浏览器给 hr 设了 user agent stylesheet：默认有 border: 1px inset（不是纯色，是三维凹陷效果），且 height 在多数浏览器里被忽略。你看到的“线”，其实是 border 渲染出来的，不是元素内容区。
- 不写
border: none，border-top可能和原有边框叠加出双线 - 设了
height: 2px却还是一条细线？说明 border 仍在主导渲染 -
color属性在 HTML5 中已废弃，对hr完全无效
用 border-top 控制粗细和线型最稳妥
这是兼容性最好、语义清晰、调试直观的方式。关键就是两步：清边框 + 单独画上边框。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须写
border: none（不能只写border-top: none） - 用
border-top: 2px dashed #999控制粗细、样式（dashed/dotted/solid）、颜色 - 不要设
height，否则可能撑高容器（hr会变成有高度的块，而非“零高线”） - 用
margin控制上下间距，比如margin: 24px 0
hr {
border: none;
border-top: 2px dashed #999;
margin: 24px 0;
}
要用 background 实现 1px 纯色细线？注意 height 和 background 配合
当你要精确控制为 1px 高度、无任何抗锯齿或阴影时，background 比 border-top 更可靠（尤其在缩放或暗色模式下）。
- 同样要先
border: none -
height: 1px是必需的，且不能省略 -
background填充颜色，例如background: #e0e0e0 - 避免同时设
border-top和background，否则可能意外叠加 - 如果父容器用了
font-size: 0或line-height: 0，hr可能塌陷，需加display: block
hr {
border: none;
height: 1px;
background: #e0e0e0;
margin: 20px 0;
display: block;
}
渐变、虚线点距、图标居中这些进阶需求怎么落地？
它们不是“多写几行 CSS 就行”，而是有明确边界条件：
- 渐变线必须用
background: linear-gradient(...)+height，不能靠border；IE11 不支持，得配降级色 -
border-style: dotted在 Safari 中点距不可控，建议用background-image: repeating-radial-gradient(...) - 想让小图标（如中间一个
●）居中在线上？hr自身不支持内容，得用::before/::after伪元素或额外包裹<div class="hr-with-icon"></div> - 响应式场景下，
margin推荐用rem或em，避免固定像素在缩放时错位
margin、height、line-height 全部拉到同一单位体系里对齐，而不是各自为政。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
