分割线
Divider
UI 组件也叫：分隔线、分隔符、Separator、hr
一句话：一条细细的横线或竖线，用来把相邻的两块内容隔开，有时中间还嵌一段小字。
详细解释
分割线是最简单的组件：一条 1px 的浅灰色线，横向时分隔上下两段内容，纵向时分隔同一行里的几个文字链接（比如「编辑 | 删除」）。它也可以在中间嵌一段文字，常见的是登录页的「—— 或 ——」，下面接第三方登录按钮。HTML 原生的 <hr> 就是一条分割线，shadcn/ui 里叫 Separator。
分割线用多了会让页面像一张表格，显得琐碎。很多时候用 留白 拉开间距、或者用卡片的背景色区分区块，比画一条线更干净。一般规则是：能用间距分开的就不用线，只有两块内容挨得很近、又需要明确分界时才用分割线。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
登录表单的「登录」按钮下方加一条带文字的分割线：左右两段 1px 浅灰线，中间是灰色小字「或」，上下各留 16px 间距，下面并排放「微信登录」「GitHub 登录」按钮；表格操作列里的「编辑」「删除」之间用高 12px 的竖向分割线隔开。
结构与适用场景
结构描述
一条 1px 的横线或竖线，可在中间或一侧嵌入一段说明文字。
适用场景
- 同一张卡片或表单里，需要把两组内容明确分开
- 一行里并排几个文字链接或操作，需要细小的分隔
- 登录页等场景需要用「或」隔开两种方式
不适用场景
- 区块之间已经有足够的留白或背景色区分
- 列表每一项之间都要分隔时，用间距或斑马纹更清爽
- 需要表达层级或分组时，用分组标题比线条清楚
常见坏用法
- 每个区块上下都画分割线，页面看起来像填满格子的表格
- 分割线颜色太深太粗，比内容本身还抢眼
- 用空的 div 加边框模拟分割线，却忘了上下间距，线和文字贴在一起
识别特征
- 一条横贯内容宽度的浅灰细线
- 细线中间可能断开，嵌着「或」之类的小字
- 一行文字链接之间的短竖线
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
hr[role="separator"].ant-divider.el-divider[class*="MuiDivider-root"].arco-divider.t-divider.n-divider[data-slot="separator"].vr