直接用 size 和 width 会出问题，因二者在 html5 中已废弃，浏览器兼容行为不可靠，且无法与现代布局协同；应彻底用 css 接管，如用 border-top 替代 size、margin: 0 auto 配合 width 实现居中。
为什么直接用 size 和 width 会出问题
这两个属性在 HTML5 中已明确废弃，浏览器虽还兼容，但行为不可靠：比如 size="1" 在 Chrome 和 Safari 渲染出的高度可能差 0.5px；width="80%" 在 flex 容器里常被忽略；更麻烦的是，它们无法和现代布局（如 Grid、flex）协同工作。真正可控的路径只有一条：用 CSS 彻底接管。
border-top 替代 size 的实际写法与陷阱
别只写 height: 1px —— 默认 <hr> 带有 3D 阴影边框，仅设高度不会生效，必须先清除默认样式。
-
border: none是必须的第一步，否则border-top会被叠加渲染 -
border-top: 2px solid #ccc才是控制“粗细”的可靠方式，其中2px是真实像素值，solid可换为dashed或dotted - 不要混用
height和border-top：设了height: 1px再加border-top: 2px，最终线高是 3px（内容区 + 边框），容易超预期 - 若要极细线（如 0.5px），得用
transform: scaleY(0.5)配合border-top: 1px，纯 CSS 无法原生输出 sub-pixel 粗细
width 和居中对齐必须搭配 margin
width 属性废止后，CSS 的 width 只作用于块级元素，默认 <hr> 就是块级，但关键在于：它不会自动居中。光写 width: 60% 只是缩窄，左边贴边。
- 要居中，必须配
margin: 0 auto—— 注意不是margin: auto，后者上下外边距为 0，左右才自动分配 - 如果父容器用了
display: flex，margin: auto反而能居中，但这是 flex 特性，不是<hr>自身行为 - 响应式场景下，建议用
max-width: 600px+width: 90%组合，避免小屏上过宽、大屏上过窄 -
width设为fit-content时，<hr>会收缩到内容宽度（通常无内容，就塌成一条点），基本没实用价值
渐变线或虚线这类进阶效果只能靠 CSS 实现
旧属性完全不支持渐变、虚线、圆角等效果，border-top 是唯一入口。
- 虚线：
border-top: 1px dashed #999，注意dashed在部分安卓 WebView 中渲染间隔不均，可用border-image替代 - 渐变：
background: linear-gradient(90deg, #f00, #00f)+height: 2px+border: none，但必须设background-size: 200% 200%防止平铺成色块 - 带阴影的分隔线：
box-shadow: 0 1px 2px rgba(0,0,0,0.1)，但需配合height: 1px和overflow: hidden避免阴影溢出 - 圆角端点：
border-radius: 4px对border-top无效，得用background+height方案才能生效
<hr> 元素本身，而不是它的伪元素或父容器；而且一旦用了 border-top，就别再碰 size 或 width 属性——哪怕只是留着，也会增加调试成本。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
