双栏布局中卡片阴影不生效，主因是父容器overflow:hidden裁剪或层叠上下文干扰；应检查并调整overflow、z-index、position及transform等属性，并统一用gap控制间距、基础类定义box-shadow。
双栏布局里卡片阴影不生效？检查 overflow 和 z-index
双栏常见用 display: flex 或 grid 实现，但卡片加了 box-shadow 却“看不见”，大概率是父容器裁剪了阴影。比如 overflow: hidden 写在双栏容器上，或者子卡片没脱离文档流导致阴影被遮挡。
实操建议：
- 检查双栏容器（如
.columns）是否设置了overflow: hidden—— 删掉或改为visible - 确保卡片有明确的
position: relative（避免被其他元素层叠覆盖） - 若卡片内用了
transform（如scale(0.98)），可能触发新层叠上下文，需配合z-index调整层级 - 阴影本身用
box-shadow: 0 4px 12px rgba(0,0,0,0.1)起手，比默认0 2px 4px更易观察
Flex 双栏中卡片阴影错位？注意 gap 和 margin 冲突
用 display: flex; gap: 1rem 布局双栏时，如果卡片又自己加了 margin，会导致实际间距变大、阴影视觉偏移，尤其在小屏下容易挤出横向滚动条。
实操建议：
- 统一用
gap控制列间距，卡片自身去掉margin-left/right - 若需阴影只出现在卡片“外侧”，可用
:nth-child(odd) { margin-right: 1rem }替代gap，但更推荐用gap+padding微调 - 阴影横向偏移量（第一个值）建议保持为
0，避免因gap计算误差导致不对称
CSS Grid 双栏卡片阴影发虚？别忽略 subpixel rendering 问题
Grid 布局中，当列宽设为 1fr 1fr 且容器宽度为奇数像素时，浏览器可能把每列渲染成带小数的像素（如 320.5px），导致 box-shadow 在边缘出现半透明模糊——不是代码写错，是渲染机制。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- 给卡片加
backface-visibility: hidden或transform: translateZ(0)，强制启用 GPU 渲染，缓解模糊 - 列宽改用
minmax(0, 1fr)，避免 fr 单元格因内容撑开后反向影响尺寸精度 - 开发阶段用浏览器 DevTools 的“Rendering”面板勾选
Paint flashing，确认阴影区域是否被重复绘制
响应式双栏下阴影消失？媒体查询里漏写了 box-shadow
很多人只在桌面端写了 box-shadow，切到平板或手机时用 flex-direction: column 重排，但忘了在对应断点里重新声明阴影——结果单栏时卡片光秃秃没效果。
实操建议：
- 把
box-shadow定义放在卡片基础类（如.card）里，而非仅写在某一个媒体查询中 - 如需不同设备用不同强度阴影，用
@media (max-width: 768px) { .card { box-shadow: 0 2px 6px rgba(0,0,0,0.08); } }显式覆盖 - 避免用
box-shadow: none重置，改用透明色过渡：box-shadow: 0 1px 3px rgba(0,0,0,0)，防止 CSS 优先级冲突
真正麻烦的不是加阴影，而是阴影在 flex/grid/响应式/缩放/滚动等组合场景下的“条件性失效”。每次看不到阴影，先看 computed styles 里 box-shadow 是否被计算出来，再查父层 overflow 和层叠上下文 —— 这比反复调参数快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
