要用实现虚线分割线，必须用css设置border: 1px dashed #999;、height: 0;和margin: 0.5em auto;清除默认样式；语义装饰需选或role="separator"的，避免可访问性问题。
用 <hr> 实现虚线分割线，但默认不是虚线
HTML 原生 <hr> 标签默认渲染为实线，不是虚线。想让它变虚线，必须用 CSS 控制 border-style，且要清掉浏览器默认的 border 和 margin 干扰。
常见错误是只写 border: 1px dashed #ccc; 却没重置默认边框，结果出现双线或粗细不一致；或者忘了设 height: 0;，导致虚线被默认 hr 的内建高度撑开、显示异常。
- 必须显式设置
border: 1px dashed #999;（不能只靠border-style） - 务必加
height: 0;，否则部分浏览器（如 Chrome）会保留默认高度并叠加 border，造成线条偏厚或位置错位 - 推荐统一清除默认外边距：
margin: 0.5em auto;（避免上下间距过大）
CSS 中 border-style: dashed 的兼容性与表现差异
dashed 在所有现代浏览器中都支持，但虚线“点”的长度和间隔由浏览器决定，无法跨平台完全一致。Chrome 和 Firefox 渲染出的 dash pattern 可能略有不同，尤其在小尺寸（如 1px）下容易看起来像点状（dotted）。
- 若需更可控的虚线节奏，改用
border-image配合 SVG 或 base64 data URL（适合设计强一致性场景） - 移动端 Safari 对极细虚线（如
0.5px）支持不稳定，建议最小用1px - 不要混用
border-bottom: dashed和<hr>——<hr>是块级换行元素，border-bottom是行内装饰，语义和布局行为完全不同
替代方案：不用 <hr>，用 <div> + <code>border 更灵活
当需要响应式虚线（比如移动端变实线）、带文字居中的“带字分割线”，或嵌套在 Flex/Grid 容器中时，<hr> 语义和布局限制多，不如一个空 <div> 自由。
<p>示例（居中虚线 + 文字）：</p>
<pre class="brush:php;toolbar:false;"><div class="divider">or</div>
<style>
.divider {
display: flex;
align-items: center;
text-align: center;
margin: 1em 0;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
border-top: 1px dashed #ccc;
}
.divider::before { margin-right: 0.5em; }
.divider::after { margin-left: 0.5em; }
</style></pre>
<ul>
<li>这种伪元素方案可精确控制左右虚线长度、间距、颜色，且不依赖 <code><hr> 的语义包袱
::before/::after 必须配合 content 才能渲染，空字符串 '' 就够用.divider 设 justify-content: center，否则文字可能左偏容易被忽略的可访问性问题
<hr> 在语义上表示主题/内容的分隔，屏幕阅读器会 announce “horizontal rule” 或 “section break”。如果只是视觉装饰（比如卡片之间的小分隔），不该用 <hr>，而该用 <div> 加 <code>role="separator" 并配 aria-orientation="horizontal"。
- 滥用
<hr>会让无障碍用户误以为内容结构发生了变化 - 纯装饰性虚线（如按钮组之间的细线）应避免
<hr>，改用<div role="separator" aria-orientation="horizontal" style="border-top: 1px dashed #eee;"> <li>如果用了 <code><hr>，就别再加aria-hidden="true"—— 这会破坏其本意，属于典型避坑反模式
虚线分割线看着简单，真正稳落地的关键在于：明确语义选择（
<hr> 还是 <div>）、清干净默认样式、避开 <code>dashed 在小尺寸下的渲染浮动，以及别让视觉需求压倒可访问性约束。
