真要立体需深度位移、多层阴影与容器裁切协同：.dashboard-card须设overflow: hidden、transform: translateZ(4px)、transform-style: preserve-3d，并用两层box-shadow（近距0 2px 6px rgba(0,0,0,0.08)，远距0 8px 16px rgba(0,0,0,0.05)）模拟明暗层次。
直接给仪表盘容器加 box-shadow 往往只出“浮纸感”，真要立体，得配合深度位移、多层阴影和容器裁切三者协同——单靠一个属性撑不起来。
为什么仪表盘加了 box-shadow 还像贴纸？
常见现象：阴影边缘发虚、hover 时跳动、圆角处被硬切、移动端锯齿明显。根本原因不是参数调得不对，而是没切断渲染干扰链：
-
box-shadow画在元素盒模型外侧，但仪表盘常由多个div堆叠组成，父容器若没设overflow: hidden，阴影会溢出或被兄弟元素裁掉 - 多数仪表盘用
display: grid或flex布局，子项若没显式background-color，阴影就失去参照基底，视觉上“没落脚点” - 纯阴影不带 Z 轴位移，人眼无法判断前后关系；
transform: translateZ(8px)必须作用于容器，且需transform-style: preserve-3d支持
给仪表盘卡片加立体阴影的最小可行组合
别碰 table 或 canvas 元素本身加阴影，统一用包裹容器控制。以下 CSS 可直接复用：
.dashboard-card {
width: fit-content;
border-radius: 10px;
overflow: hidden;
background: #fff;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 8px 16px rgba(0, 0, 0, 0.05);
transform: translateZ(4px);
transform-style: preserve-3d;
}
- 两层
box-shadow缺一不可：第一层紧贴底部（小 blur + 稍高 alpha）模拟近距投影；第二层扩散更开（大 blur + 更低 alpha）拉纵深 -
width: fit-content防止父容器撑满导致阴影横向拉宽变形 -
overflow: hidden不仅保圆角，还强制浏览器把阴影当整体光栅化，减少移动端闪烁 - 别给卡片内图表（如 ECharts 或 Chart.js 容器）单独加
filter: drop-shadow()——它会触发额外合成层，滚动卡顿
深色主题下阴影完全失效？配色逻辑错了
在 #121212 类深背景上用 rgba(0,0,0,0.2)，阴影几乎不可见。这不是 bug，是明暗对比失衡：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 深色主题应反向使用浅灰+高透明度：例如
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.06)，靠微弱高光制造“浮起”错觉 - 避免用纯白
#fff——它在深底上会过曝；推荐rgba(240, 240, 240, 0.08)这类偏暖浅灰 - 如果仪表盘含半透图表（如 SVG 折线图），确保其容器有
background: rgba(255, 255, 255, 0.02)，否则阴影缺乏承托面
hover 时阴影变厚却卡顿？过渡设置太重
直接写 transition: box-shadow 0.3s ease 在中低端 Android 上极易掉帧。真正轻量的做法是：
- 只过渡
transform和box-shadow两个属性：transition: transform 0.2s ease, box-shadow 0.2s ease - hover 状态加
will-change: transform，但仅限交互触发时动态添加，不要常驻在基础样式里 - 别用
blur-radius > 12px的阴影做 hover 动画——模糊半径越大，光栅化耗时指数级上升 - 测试时打开 Chrome DevTools → Rendering → 勾选 “FPS meter”，滚动+悬停看是否跌破 50fps
最容易被忽略的点：仪表盘通常含多个同构卡片，但每张卡片的阴影参数不能完全一致——微调第二层阴影的垂直偏移（比如 ±1px），能打破机械重复感，让整体看起来更自然。这不是炫技，是视觉心理学的基本要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
