HTML 中 <hr /> 标签默认不支持直接设粗细，必须用 CSS 的 border（如 border: 3px solid #000）控制，最兼容可靠；height + background-color 是替代方案但需注意坑；响应式推荐 clamp() 或媒体查询。
HTML 中 <hr> 标签默认不支持直接设粗细
浏览器对 <hr> 的渲染是基于 CSS 的，原生 HTML 属性如 width、size 已被废弃（HTML5 不再合法），强行写上也不会生效。你看到的“粗线”其实是 CSS 控制的结果，不是标签本身的能力。
常见错误现象：
– 写了 <hr size="5"> 但毫无变化
– 在 Chrome/Firefox 中样式不一致，甚至完全失效
– 用 border 设置后发现上下留白异常
- 必须用 CSS 的
border或height+background-color控制视觉粗细 -
border更可靠：比如border: 3px solid #000;就是 3px 黑色实线 - 若用
height，记得同时设background-color，否则可能透明或显示为默认浅灰 - 旧项目里残留的
size属性只在 IE5-8 有作用，现代环境别依赖它
用 border 加粗 <hr> 最稳妥
这是目前最兼容、最可控的方式。所有主流浏览器（Chrome、Firefox、Safari、Edge）都按标准解析 border，且不会干扰默认 margin 行为。
使用场景：
– 需要统一粗细（如 2px、4px）
– 要配合主题色做强调分隔
– 嵌入 Markdown 渲染器后需覆盖默认样式
立即学习“前端免费学习笔记（深入）”；
- 直接写内联样式：
<hr style="border: 4px solid #333;"> - 更推荐用 class：
<hr class="thick-hr">，然后在 CSS 里定义.thick-hr { border: 3px solid #666; margin: 1rem 0; } - 避免只写
border-width：没border-style（如solid）的话，宽度无效 - 注意：
border是围绕整个 hr 元素的，所以实际占用高度 =border-width × 2，垂直间距可能比预期大
height + background-color 是替代方案，但有坑
这种方式把 <hr> 当成一个块元素来画，适合需要纯色无边框、或想精确控制高度（比如 1px 线+2px 阴影）的场景。
常见错误现象：
– 设了 height: 2px 却看不见线（缺 background-color）
– 在 Safari 下出现模糊或抗锯齿异常
– 和相邻段落间距变小，因为默认 margin 没了
- 必须同时设置：
height: 2px;+background-color: #000;+border: none; - 建议加
margin: 1.5rem 0;手动恢复可读间距 - 不要混用
border和height：两者机制冲突，结果不可预测 - 如果父容器用了
font-size: 0;或line-height: 0;，<hr>可能塌陷，优先查这个
响应式场景下粗细别写死 px
在移动端或缩放页面中，固定像素的粗线容易显得突兀或过细。真正难处理的不是“怎么加粗”，而是“什么时候该变细”。
性能 / 兼容性影响：
– em 或 rem 单位会随字号缩放，适合内容流式布局
– clamp() 可以限制最小/最大粗细，但 IE 完全不支持
– 媒体查询是最稳的降级手段
- 基础响应式写法：
border: clamp(1px, 0.15em, 3px) solid #666; - 兼容老浏览器就用媒体查询：
@media (max-width: 768px) { .thick-hr { border-width: 2px; } } - 别用
vmin控制粗细：它对小屏幕太敏感，1vw 在手机上可能只有 0.3px，渲染不可靠 - 设计系统里如果用 Design Token 管理分割线，粗细值最好和字体层级挂钩，而不是独立维护一套数字
