现代项目中的size属性无效，因html5已废弃且主流浏览器ua样式表不支持；应使用border（需指定style）实现响应式、稳定的分隔线粗细控制。
为什么
在现代项目里基本没用
不是你代码写错了，是浏览器压根不读 size 属性。HTML5 已正式废弃它，Chrome、Firefox、Safari 的 UA 样式表里根本没这条规则。你偶尔看到“生效”，大概率是旧版 WebView 或 IE 兼容逻辑残留，行为不可控、无法复现。
用开发者工具检查 <hr size="4"> 元素，computed 样式里找不到任何跟高度或边框宽度相关的值——这就说明它被忽略了。
更麻烦的是：就算它“看起来有效”，size 只接受纯数字（如 4），单位固定为像素，没法响应缩放、高 DPI 屏或字体变化，一换设备就露馅。
用 border 设置粗细最稳妥
所有现代浏览器都按标准解析 border，而且它直接控制视觉厚度，不依赖默认渲染逻辑。
-
border: 3px solid #666✅ 有效 ——solid激活了宽度解析，3px真正决定粗细 -
border-width: 3px❌ 无效 —— 缺border-style，浏览器仍用默认的inset，宽度被忽略 -
border: 0.15em solid #999✅ 响应式友好 —— 随父级字号缩放，适合无障碍场景 -
border: clamp(1px, 0.1em, 2px) solid #999✅ 限制范围 —— IE 不支持，但 Chrome/Firefox/Safari 都行
别混用 height 和 border：比如 height: 2px; border: 3px solid #000 会导致总高度变成 8px（3+2+3），Safari 渲染还可能错位。
只保留上边框是更干净的写法
默认 <hr> 实际有四边 border，各 1px，但 height: 0 让它只显示为一条线。想精确控制“单线”粗细，推荐先清空再单设：
-
border: none—— 必须加，否则默认边框和新边框叠加 -
border-top: 3px solid #000—— 只画上边，视觉就是一条纯色横线 -
margin: 0.5em auto—— 重置上下间距，避免和默认margin冲突
错误写法：border-top: 3px solid #000 单独用 —— 默认四边边框还在，结果是“粗线+阴影块”，不是你想要的干净分隔线。
响应式粗细不能靠 size，得靠 CSS 单位和媒体查询
固定像素值（如 size="2"）在 200% 缩放页面下会显得过细；在移动端小屏上又可能太抢眼。真要适配，必须换思路：
- 用
em：border: 0.12em solid #999，随父级字号等比缩放 - 用
clamp()：border: clamp(1px, 0.1em, 1.5px) solid #999，限制最小/最大值 - 用媒体查询最稳：
@media (max-width: 768px) { hr { border-width: 1px; } }
千万别在 size 里写 em 或百分比 —— 它只认纯数字，写了也白写，还让代码语义混乱。
真正难的不是“怎么让线变粗”，而是“怎么让粗细在不同设备、不同缩放、不同浏览器里都稳定出现”。盯住 border 就够了，但务必带上 solid 或其他明确的 border-style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
