卡片阴影异常主因是层级、父容器裁剪和定位上下文不匹配：检查overflow是否隐藏阴影，确保position与z-index协同生效，并避免层叠上下文干扰。

卡片阴影“被盖住”“只露半截”“hover时突然消失”，基本不是box-shadow写错了，而是层级（z-index）、父容器裁剪（overflow）、定位上下文三者没对齐。

为什么卡片阴影在flex/grid里经常被裁掉

阴影本身不占布局空间，但属于“溢出内容”。flex或grid容器若没显式控制尺寸或溢出行为，浏览器会默认裁剪超出部分。

• 检查卡片直接父容器是否含 overflow: hidden 或 overflow: auto —— 有就删，或临时改成 overflow: visible
• flex容器中子项用 flex: 1 却没设父容器 min-height，可能导致高度塌陷，阴影落空
• grid轨道用 1fr 但内容为空或高度不足时，阴影可能渲染在不可见区域；加 outline: 1px solid red 可快速验证实际渲染边界

卡片之间互相遮挡：z-index 不生效的常见原因

z-index 只对定位元素（position 值为 relative、absolute、fixed 或 sticky）起作用，且受层叠上下文限制。

• 确保卡片自身有 position: relative，再设 z-index: 1（或更高）
• 避免父容器意外创建新层叠上下文（如设置了 opacity 、transform、filter 等），否则子卡片的 z-index 只在该上下文内有效
• 悬停时想让当前卡片“浮最上”，不要只改 box-shadow，必须同步提升 z-index，例如：.card:hover { z-index: 10; }

多卡片 hover 时阴影重叠混乱

多个卡片并排，hover其中一个，其他卡片阴影“穿过来”盖住它——这不是bug，是阴影自然渲染的结果。解决思路是隔离视觉空间，而非强行压z-index。

DeepBI DHTML 页面生成器

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

下载

• 给每张卡片单独包裹一层 position: relative 容器，并设 overflow: visible，避免阴影跨容器溢出干扰
• 慎用 box-shadow: 0 0 20px rgba(0,0,0,0.2) 这类全向大模糊值，它容易与其他卡片阴影物理重叠；改用带方向性的值，如 0 4px 8px -2px rgba(0,0,0,0.15)（负spread收束边缘）
• 如果卡片间距小，可用 margin 预留阴影空间，比如 margin: 12px 比 margin: 8px 更安全

移动端真机下阴影“忽隐忽现”

iOS/Android 的 :hover 在触摸设备上仅对可聚焦元素短暂触发，且持续时间极短，导致阴影过渡来不及完成。

• 卡片用 或 语义化标签，比
  更可靠
• 若必须用
  ，加 tabindex="0" 并配合 :focus-within（现代浏览器支持）或 JS 监听 touchstart 动态加 class
• 真机测试时，transition: box-shadow 0.2s ease 中的时间别超过 0.25s，否则用户松手前动画还没走完

真正难调的不是阴影参数本身，而是它和周围容器、定位、层叠上下文之间的“空间关系”。每次阴影异常，优先查父容器的 overflow 和卡片自身的 position 状态，比反复调 blur-radius 有效得多。