flex容器中卡片box-shadow只显示半截的主因是父容器overflow: hidden裁剪，次要原因是margin与gap混用及transform等触发层叠上下文；应优先改overflow，其次用gap替代margin，必要时通过padding腾出阴影空间。
Flex容器里卡片加了 box-shadow 却只显示半截，不是阴影写错了，而是它被父容器“物理裁掉”了——overflow: hidden 是头号凶手，margin 和 gap 混用是帮凶。
为什么 Flex 容器会裁掉 box-shadow
阴影不占文档流，也不撑开盒子，浏览器把它画在元素 border box 外围。一旦父容器设了 overflow: hidden（很多 UI 库默认加），超出 padding box 的部分直接被剪掉。更隐蔽的是：如果父容器同时有 transform 或 opacity，可能隐式创建新层叠上下文，在 Safari 里连 padding 区域都一起裁。
- 打开开发者工具，选中卡片，看 computed 样式里
overflow是不是hidden或auto - 临时改成
visible，阴影立刻出现 → 坐实是裁剪问题 - 检查父容器是否用了
will-change: transform、filter等触发新层叠上下文的属性
Flex 中该用 gap 还是 margin 控制卡片间距
用 margin 给每个卡片加右/下边距，是新手最常踩的坑：首尾多出空白、与 overflow: hidden 冲突、阴影被切在边缘；而 gap 是 Flex/Grid 原生间距控制机制，它作用于轨道之间，不改变子项盒模型，完全绕过裁剪逻辑。
- 父容器加
display: flex; flex-wrap: wrap; gap: 16px - 卡片自身清空所有
margin，只留padding控制内边距 - 若需兼容 IE，才退回到
margin+:first-child/:last-child修正 - 别在卡片上同时用
gap和margin，会导致间距加倍或错位
给父容器加 padding 能不能救阴影
能，但得算准值、看场景。padding 属于 padding box，而 overflow: hidden 只裁 content box，所以加 padding 是给阴影“腾地方”，不是修复 bug。
- padding 值至少 ≥
abs(v-offset) + blur-radius（例如box-shadow: 0 4px 12px rgba(0,0,0,0.15)→ 至少padding: 16px） - 如果父容器用了
box-sizing: border-box（默认），加 padding 会压缩内容区 → 卡片可能被挤变形 - 响应式布局中，固定 padding 在小屏过大、大屏又不够 → 不如优先改
overflow - 第三方组件黑盒无法改 overflow 时，才用 padding 作为兜底方案
box-shadow 参数写错也会让阴影“消失”
语法错误不会报错，但整条声明会被浏览器忽略。比如 blur-radius 写成负数、漏掉颜色、多个阴影间逗号缺失，都会导致 computed 样式里 box-shadow 显示为 none。
- 最小合法写法：
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1)（x、y、blur 不可省） - 避免
box-shadow: 0 0 12px rgba(0,0,0,0.1)这种无偏移全向模糊，它看起来像发光，且易被文字压住 - 推荐双层写法：
0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)，第二层用负 spread 收紧边缘 - 别在
inline元素上直接用box-shadow，先加display: inline-block
真正卡住阴影的，从来不是 box-shadow 的数值，而是父容器的 overflow、子项的定位方式、以及你有没有把 gap 和 margin 当成同一件事来用。调之前，先关掉 overflow: hidden 看一眼，比调十次阴影参数更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
