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 更自由，也更不容易踩坑。

• 卡片底部细线：
  —— 不设 height 也能显形
• 中间带文字的分割线（如“或者”）：
  或者
  ，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 后，批量替换为

  ---

  ，所有样式收归 CSS 文件统一管理
• 小程序（如微信）需用 editor.insertText 或 editor.setContents 插入，不能依赖编辑器按钮直出的原始 hr
• 若用 contenteditable 自研编辑器，插入时就应生成带 class 的 hr，而非裸标签
• 真正麻烦的从来不是画出一条线，而是想清楚这条线代表什么——是文档结构的断点，还是 UI 像素的装饰。选错，后面修起来比重写还费劲

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！