仪表盘容器禁用outline，因其不参与布局、无法单边控制、Firefox常不渲染且与焦点语义强绑定；应改用border或box-shadow实现可控外轮廓。
outline 在仪表盘容器（如 ）上加“外框”基本不可靠，它不参与布局、无法单边控制、Firefox 常完全不渲染，且和焦点语义强绑定；真正可控的外轮廓必须用
border 或
box-shadow。
为什么仪表盘容器别用 outline
outline 是为表单控件（
-
outline 在 Firefox 和旧版 Safari 中直接不显示
- 即使 Chrome 渲染了，位置也常漂移——尤其容器设了
transform 或 scale 后更不准
- 无法设置
border-radius，圆角仪表盘配 outline 会露出直角缺口
- 想只加底部轮廓？不行，
outline 只能四边等宽等样
用 border 实现干净外轮廓（推荐）
仪表盘通常是块级容器（、
），用
border 最直接。关键点是避免影响原有尺寸：
- 确保父容器或自身用了
box-sizing: border-box，否则 border 会让宽度变大
- 统一写法：
border: 2px solid #3b82f6（三值缺一不可：宽度 + 样式 + 颜色）
- 要圆角外框？直接加
border-radius: 8px，和 border 兼容良好
- 仅需某一边有线？用
border-bottom: 1px dashed #e2e8f0 这类方向属性
用 box-shadow 模拟“悬浮式”外轮廓
当仪表盘已有背景、边框，又想额外加一层视觉强调轮廓（比如点击后高亮、状态切换时描边），box-shadow 更灵活：
DeepBI DHTML 页面生成器
生成可在 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 触发，例如： +
.dashboard:focus-within { box-shadow: 0 0 0 3px #2563eb; }
- 注意：不要用
outline: none 粗暴关闭默认焦点样式，应改用 :focus-visible 条件隐藏
表格类仪表组件的外轮廓特殊处理
如果仪表盘里嵌了数据表格（），不能对 元素本身设 outline——它在多数浏览器中无效。正确做法是：- 设
border-collapse: collapse，再给 加 border，此时边框才真正成为最外层轮廓
- 要圆角？必须用
border-collapse: separate + border-spacing: 0 + border-radius + overflow: hidden
- 避免老写法：
，它行为不稳定，且和 CSS border 容易冲突
仪表盘外轮廓的复杂点不在“怎么画”，而在“画在哪一层”——是包裹内容盒（border）、包裹 padding 盒（box-shadow），还是强行绕开盒模型（outline，不推荐）。选错层级，后续适配暗色模式、缩放、响应式时会反复出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
