卡片阴影被兄弟元素盖住不是z-index失效，而是卡片未设position:relative导致z-index被忽略，且父容器若含transform/filter会创建独立层叠上下文；应为卡片加position:relative和z-index:1，并用gap替代margin控制间距，同时深色背景下需改用浅色阴影。
卡片阴影被兄弟元素盖住，z-index 不起作用？
不是 z-index 没生效，而是卡片没创建独立层叠上下文。z-index 只对定位元素（position: relative、absolute 或 fixed）有效，且只在同一个层叠上下文中比较。如果所有卡片都是 static（默认），z-index 完全被忽略。
解决方法很简单：
- 给每个卡片加
position: relative和z-index: 1（或更高，但保持一致即可） - 确保父容器没有
transform、filter或will-change这类会强制创建新层叠上下文的属性——否则卡片的z-index只在该父容器内部生效，无法跨容器比大小 - 别在父容器上设
z-index: 0，这会把它降为“层叠上下文根”，锁死子元素层级范围
Flex 布局中卡片阴影被裁掉，是 gap 还是 margin 的问题？
90% 是用了 margin 而不是 gap。Flex 容器里用 margin-right 或 margin-bottom 给卡片加间距，会导致最后一行/列的卡片外边距悬空，而父容器若恰好有 overflow: hidden（比如某些 UI 框架默认加了），阴影就会被硬切掉。
正确做法：
- Flex 父容器上直接设
gap: 16px，卡片自身不写任何margin - 如果必须兼容 IE，则用
margin+:nth-child()伪类清除首尾多余间距，但要额外检查是否触发了父容器的 overflow 裁剪 - 禁用
margin-collapse类行为：卡片设display: block，避免和相邻块级元素发生外边距合并，导致高度计算异常间接影响阴影渲染区域
阴影看起来“发虚”或边缘糊成一片，参数怎么调？
根本原因常是 blur-radius 过大或缺失 spread-radius 控制。浏览器对高斯模糊的渲染在缩放、Retina 屏下会放大失真，不是 CSS 写错了，而是数值没压住。
推荐组合（兼顾清晰与立体感）：
- 基础态：
box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1)（负 spread 收紧边缘，防盖字） - 悬停态：
box-shadow: 0 4px 8px -2px rgba(0,0,0,0.15), 0 2px 4px -2px rgba(0,0,0,0.1)（双层，模拟接触阴影+环境光） - 移动端降级：
@media (max-width: 768px) { .card { box-shadow: 0 1px 3px -1px rgba(0,0,0,0.08); } }
深色背景上卡片阴影看不见，不是透明度不够，是颜色错了
用 rgba(0,0,0,0.2) 在深灰或黑色背景上基本等于没影。阴影本质是“对比”，不是“叠加”。深色背景下需要浅色、低饱和度的投影来制造明暗差。
实操建议：
- 浅色背景：
rgba(0,0,0,0.08) ~ 0.12（偏冷灰） - 深色背景：
rgba(255,255,255,0.05) ~ 0.1（偏暖白，避免刺眼） - 自动适配：
@media (prefers-color-scheme: dark) { .card { box-shadow: 0 1px 4px -1px rgba(255,255,255,0.06); } }
真正卡住效果的，往往不是 shadow 值本身，而是父容器的 overflow: hidden、卡片未设 position: relative、或者在深色模式下忘了换颜色——这三个点漏一个，调试十分钟都找不到原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
