gap不能直接“撑开”box-shadow，因其仅控制网格项间空白，不改变卡片盒模型边界；而box-shadow默认向外投射，会覆盖gap区域造成视觉重叠，需通过overflow:hidden、负spread值（如-1px）及柔和参数收束阴影，再配合gap营造呼吸感。
gap 为什么不能直接“撑开” box-shadow
很多人给 grid-container 设置 gap: 20px，却发现卡片阴影依然重叠——因为 gap 只控制网格项之间的空白区域，不改变卡片自身的盒模型边界；而 box-shadow 默认向外投射，自然覆盖到相邻卡片的 gap 区域上，视觉上糊成一片。
真正要解决的不是“加大 gap”，而是让阴影落在卡片自身范围内，再靠 gap 留出干净呼吸感：
-
overflow: hidden必须加在卡片上，配合border-radius物理裁切溢出的阴影边缘（尤其圆角卡片） - 卡片背景色不能是
transparent，否则阴影会透出底层内容，削弱分离感 -
box-shadow的第四个参数（spread radius）建议设为0或小负数（如-1px），避免正 spread 让阴影变厚、变硬，和相邻卡片打架
box-shadow 参数写错导致阴影“发虚”或“压字”
阴影不是越模糊越好。box-shadow: 0 0 12px rgba(0,0,0,0.1) 是典型错误：无偏移 + 全向模糊，看起来像发光，不是浮起；更糟的是，这种写法会让阴影紧贴文字底部，小字号时产生压迫感。
推荐组合（兼顾清晰度与层次）：
- 基础态：
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) - 悬停态：
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1) - 关键点：负的
spread-radius（如-1px）能收紧阴影边缘，避免虚边盖住文字
父容器 overflow: hidden 导致阴影被裁切
卡片阴影被“砍掉一半”，最常见原因是父容器设置了 overflow: hidden ——它不会因为 gap 存在就自动留出阴影空间。
有三种稳妥做法：
- 移除父容器的
overflow: hidden，除非真有内容溢出需要裁剪 - 若必须保留裁剪，改用
padding在容器内侧预留空间（例如padding: 16px），让阴影有地方落脚 - 极端兼容场景下，可考虑用
inset阴影替代，但会失去“悬浮”感，不推荐用于常规卡片
gap 与点击区域断裂问题怎么补
gap 创建的是不可点击的空白间隙，鼠标移到那里，:hover 立刻失效，移动端轻点间隙也无响应。这不是 bug，是设计使然。
如果交互连续性很重要，别指望 gap 自己扩展事件区域，试试这些实操方案：
- 用
margin替代gap：给每个卡片设margin-bottom和margin-right，再用:not(:nth-child(3n))清除末尾冗余边距 - 嵌套 wrapper：保留
gap，但在每个卡片内部加一层div，设margin: -8px（负值等于 half-gap），让视觉“顶满”，同时保持外层卡片响应完整 - 用
box-shadow模拟间隙：关闭gap，改用box-shadow: 8px 0 0 0 transparent，它不影响布局流，但能触发鼠标事件
真正卡住效果的，往往不是 box-shadow 写得不够炫，而是 overflow、box-sizing 和 gap/margin 的混用逻辑没理清。负 spread 值在 Safari 15+ 才完全支持，老版本会回退为 0，这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
