gap不能撑开box-shadow，因其仅控制网格项间空白，而阴影向外投射会覆盖gap区域；应通过overflow: hidden、负spread值（如-1px）及柔和参数来收束阴影，配合gap营造呼吸感。
gap 为什么不能直接“撑开” box-shadow
很多人试过给 grid 容器设 gap: 20px，卡片却还是阴影重叠——因为 gap 只控制网格项之间的空白区域，不改变卡片自身的盒模型边界；而 box-shadow 默认是向外投射的，会自然覆盖到相邻卡片的 gap 区域上，视觉上就糊成一片。
解决思路不是加 gap，而是让阴影“缩回来”，只落在卡片自身范围内，再靠 gap 留出干净呼吸感。
- 用
box-shadow: 0 4px 12px rgba(0,0,0,0.08)这类柔和值，避免强黑边吃掉间隙 - 关键：给卡片加
overflow: hidden，配合border-radius，能物理裁切掉溢出的阴影边缘（尤其圆角卡片） - 如果卡片有背景色，确保不是
transparent，否则阴影会透出底层内容，削弱分离感
box-shadow 的 spread 值到底要不要设正数
spread 是第四个参数，正数会让阴影整体向外扩张一圈，负数则向内收缩。在网格卡片里，通常建议设为 0 或小负数（如 -1px）。
原因很实际：正 spread 会让阴影变厚、变硬，容易和相邻卡片的阴影打架；而 -1px 能轻微“收紧”阴影边缘，配合 gap 后更显利落。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
box-shadow: 0 2px 8px 4px rgba(0,0,0,0.1)→ 阴影太宽，gap 显得像被填满 - 推荐写法：
box-shadow: 0 2px 8px -1px rgba(0,0,0,0.08) - 注意：Chrome 对负 spread 渲染最稳，Safari 15+ 才完全支持，老版本可能回退为 0
grid-gap 和 row-gap / column-gap 兼容性差异
gap 属性本身已全平台支持（包括 Safari 14.1+），但如果你还在用 grid-gap，就得小心了：它在旧版 Grid（display: -ms-grid）中无效，且已被标准废弃。
真正要写的只有 gap，它同时控制行列间距；若需单独控制，用 row-gap 和 column-gap 更明确、更安全。
- 别写：
grid-gap: 16px（过时，部分工具链警告） - 写：
gap: 16px或row-gap: 12px; column-gap: 16px - 注意：IE 完全不支持
gap，如需兼容，得用margin模拟，但会破坏 grid 自动对齐逻辑
卡片 hover 时阴影突变导致布局抖动
常见错误是 hover 时突然加大 box-shadow 模糊半径或增加 spread，导致卡片视觉尺寸“膨胀”，虽然没改 width/height，但阴影占位变化会让周围卡片微移——尤其在 flex/grid 中特别明显。
本质是阴影虽不占文档流，但渲染层会参与合成，大阴影触发重绘范围扩大，人眼就感知为“跳”。
- hover 时只调
transform: translateY(-2px)+ 微调box-shadow模糊值（比如从 8px → 12px），别动 offset 或 spread - 给容器加
will-change: transform（仅必要时），提前提示浏览器该元素将动画 - 更稳做法：hover 前后保持阴影最大可能尺寸一致，例如统一用
box-shadow: 0 6px 16px -2px rgba(0,0,0,0.08)，hover 仅增强透明度
真正难的不是写对那几行 CSS，而是阴影的“厚度感”和 gap 的“空灵感”之间只差 0.5px 的数值平衡；多调两次，盯着看三秒，比查十遍文档管用。
