仪表盘容器禁用outline，因其不参与布局、无法单边控制、Firefox常不渲染且与焦点语义强绑定；应改用border或box-shadow实现可控外轮廓。
outline 在仪表盘容器（如 <div class="dashboard">）上加“外框”基本不可靠，它不参与布局、无法单边控制、Firefox 常完全不渲染，且和焦点语义强绑定；真正可控的外轮廓必须用 <code>border 或 box-shadow。
为什么仪表盘容器别用 outline
outline 是为表单控件（<input>、<button></button>）设计的辅助焦点样式，不是装饰工具。在仪表盘这类自定义容器上硬套，会出现：
-
outline在 Firefox 和旧版 Safari 中直接不显示 - 即使 Chrome 渲染了，位置也常漂移——尤其容器设了
transform或scale后更不准 - 无法设置
border-radius，圆角仪表盘配 outline 会露出直角缺口 - 想只加底部轮廓？不行，
outline只能四边等宽等样
用 border 实现干净外轮廓（推荐）
仪表盘通常是块级容器（<div>、<code><section></section>），用 border 最直接。关键点是避免影响原有尺寸：
- 确保父容器或自身用了
box-sizing: border-box，否则border会让宽度变大 - 统一写法：
border: 2px solid #3b82f6（三值缺一不可：宽度 + 样式 + 颜色） - 要圆角外框？直接加
border-radius: 8px，和border兼容良好 - 仅需某一边有线？用
border-bottom: 1px dashed #e2e8f0这类方向属性
用 box-shadow 模拟“悬浮式”外轮廓
当仪表盘已有背景、边框，又想额外加一层视觉强调轮廓（比如点击后高亮、状态切换时描边），box-shadow 更灵活：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 纯外轮廓写法：
box-shadow: 0 0 0 2px #3b82f6（四个参数：x偏移、y偏移、模糊、扩散半径） - 带轻微发光感：
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) - 配合交互：加
tabindex="0"后用:focus-within触发，例如：<div class="dashboard" tabindex="0"> + <code>.dashboard:focus-within { box-shadow: 0 0 0 3px #2563eb; } - 注意：不要用
outline: none粗暴关闭默认焦点样式，应改用:focus-visible条件隐藏 - 设
border-collapse: collapse，再给<table> 加 <code>border，此时边框才真正成为最外层轮廓 - 要圆角？必须用
border-collapse: separate+border-spacing: 0+border-radius+overflow: hidden - 避免老写法：
<table border="1">，它行为不稳定，且和 CSS <code>border容易冲突仪表盘外轮廓的复杂点不在“怎么画”，而在“画在哪一层”——是包裹内容盒（
border）、包裹 padding 盒（box-shadow），还是强行绕开盒模型（outline，不推荐）。选错层级，后续适配暗色模式、缩放、响应式时会反复出问题。
表格类仪表组件的外轮廓特殊处理
如果仪表盘里嵌了数据表格（<table>），不能对 <code><table> 元素本身设 <code>outline——它在多数浏览器中无效。正确做法是：
