hr颜色和粗细生效必须先清默认border，再用border-top（如border-top:2px solid #666）或background-color（配height）重绘，否则因替换元素特性及浏览器user agent样式导致失效。
hr 默认不是“丑”，而是语义和样式混在一起没理清——直接写 hr 能出线，但立刻要重置 margin、清掉 border、明确用 background-color 或 border-top 控制视觉，否则在现代布局里必然错位、发虚、撑开空白。
怎么改 hr 的颜色和粗细才真正生效
很多人试了 color 或 height 没反应，是因为 hr 是替换元素，浏览器默认用 border-bottom 渲染，不是靠文本色或块高。必须先清边框，再选一种路径：
- 用
border-top：最兼容，hr { border: none; border-top: 2px solid #666; margin: 1rem 0; } - 用
background-color：更可控（比如渐变），但得配height和overflow: hidden，hr { border: none; height: 2px; background: #666; overflow: hidden; } - 别碰
width属性：它在 flex 容器或带 padding 的父级里行为不一致，改用max-width: 90%; margin: 1rem auto; - Firefox 和 Chrome 对
box-sizing默认值不同，统一加box-sizing: border-box;避免高度偏差
为什么有时候 hr 在手机上看起来模糊甚至消失
高 DPR 屏幕（如 iPhone）会把 1px 边框渲染成 0.5 物理像素，结果发虚或不可见。这不是 bug，是设备像素比的正常表现。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 最稳方案：用
transform: scaleY(0.5)缩放一条2px线，hr { border: none; height: 2px; background: #e0e0e0; transform: scaleY(0.5); transform-origin: top; } - 避免媒体查询写
border: 0.5px：兼容性差，部分 Android WebView 不认 - 如果用了 CSS reset（如 normalize.css），检查它是否已重置了
hr的margin和border，你的样式可能被覆盖了
什么时候该放弃 hr，改用 div + border
当分割线只是视觉装饰、不表达内容结构切换时，div 更自由，也更不容易踩坑。
立即学习“前端免费学习笔记（深入）”；
- 卡片底部细线：
<div style="border-bottom: 1px solid #f0f0f0;"></div>—— 不设height也能显形 - 中间带文字的分割线（如“或者”）：
<div class="divider-with-text"><span>或者</span></div>，CSS 用 flex 实现三列布局，span居中，两边用flex: 1和border-top - 需要响应式粗细（比如桌面 2px、移动端 1px）：
div可以直接套媒体查询；hr在富文本导出后常被塞进内联样式，反而难统一控制 - 注意：别给
div加role="separator"试图模拟语义——屏幕阅读器不会因此读出“分隔”，纯属冗余
富文本编辑器里插入的 hr 为什么总出问题
编辑器点“插入分割线”生成的 hr，往往带一堆内联样式，比如 style="width:100%;height:2px;border:none;background:#ccc;"，这在响应式容器里极易溢出、错位、高 DPR 发虚。
- 导出 HTML 后，批量替换为
<hr class="rich-divider">，所有样式收归 CSS 文件统一管理 - 小程序（如微信）需用
editor.insertText或editor.setContents插入，不能依赖编辑器按钮直出的原始hr - 若用
contenteditable自研编辑器，插入时就应生成带 class 的hr，而非裸标签 - 真正麻烦的从来不是画出一条线，而是想清楚这条线代表什么——是文档结构的断点，还是 UI 像素的装饰。选错，后面修起来比重写还费劲
