卡片内部视觉分隔应避免使用语义为“主题级分隔”的hr，改用border-bottom控制线条样式；多卡片并排优先用gap留白；标题下装饰线推荐伪元素::after实现，确保语义正确、渲染可控。

hr 不该用在卡片内部做视觉分隔——它语义是“主题级分隔”，插在卡片里会误导屏幕阅读器，也破坏卡片作为独立模块的语义完整性。

卡片内部用 border-bottom 最直接

给卡片内的子元素（比如标题、描述、按钮）加底边框，比塞一个 hr 更合理、更可控：

• 用 border-bottom: 1px solid #e0e0e0; 替代 hr，线条粗细、颜色、间距全由 CSS 管理
• 注意补 padding-bottom 或 margin-bottom，否则文字会贴着线，尤其在小屏上难读
• 如果卡片本身有 border-radius，border-bottom 仍能自然衔接圆角，而 hr 默认撑满宽度、硬切角，容易突兀

多卡片并排时，用 gap 比加线更干净

父容器设 display: flex; gap: 16px;，就能自动在卡片间留白——这比每个卡片右侧加 border-right 更可靠：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 响应式断行时，gap 会自动消失或重排，而边框可能残留半截线
• 深色模式下，边框色需手动同步更新；gap 无颜色，不参与主题适配逻辑
• 若真要“线感”，可在 gap 基础上叠加伪元素：父容器 position: relative;，再用 ::after 在间隙中央画一条细线

标题下方装饰线优先用伪元素

卡片标题下那条细线，别用 hr，也别用空 div，直接用 ::after：

立即学习“前端免费学习笔记（深入）”；

• 给 .card-title 加 position: relative;
• 写 .card-title::after { content: ""; display: block; width: 40px; height: 2px; background: #007bff; margin-top: 8px; }
• 这样线长可控、位置精准，且不污染 DOM 结构，也不影响语义流
• 若需居中对齐，用 left: 50%; transform: translateX(-50%);，比靠 margin: auto 更稳

真正容易被忽略的是语义和渲染路径的耦合：一条视觉线，在 DOM 层是 hr 还是 border，决定了它是否会被读屏器宣布为“分隔符”，也决定了它在 flex/grid 重排时是否参与尺寸计算。别让样式选择绕过语义意图。