卡片阴影不一致需四步解决：统一box-shadow参数、适配不同背景色微调透明度、排查父容器overflow/transform等渲染干扰、用CSS自定义属性全局管理阴影。

卡片阴影不一致，通常不是阴影本身“出错”，而是多个因素叠加导致视觉差异——比如阴影的偏移、模糊度、颜色透明度、卡片背景色、父容器的 overflow 设置，甚至是否启用了硬件加速（transform: translateZ(0)）都可能影响渲染效果。统一 box-shadow 只是第一步，关键在于控制变量、消除干扰。

检查并统一 box-shadow 的四个核心参数

box-shadow 的标准写法是：
box-shadow: h-offset v-offset blur spread color;
最容易被忽略的是 blur（模糊半径）和 spread（扩展半径）——哪怕只差 1px，配合不同背景或缩放比例，阴影浓淡和范围就会明显不同。

• 建议用固定值组合，例如：0 4px 12px -2px rgba(0,0,0,0.1)（常用轻量卡片）
• 避免混用 inset 和外部阴影；同一套 UI 中不建议同时存在 inset 卡片和外投影卡片
• 颜色统一用 rgba()，禁用 hsla() 或命名色（如 grey），确保透明度可控

注意卡片背景与阴影的叠加干扰

白色卡片（background: #fff）和浅灰卡片（background: #f9fafb）在相同阴影下，人眼感知的“浮起感”完全不同。深色背景会让阴影显得更弱，浅色背景则放大对比。

• 若需多背景色共存，可为不同背景微调阴影透明度：白底用 rgba(0,0,0,0.08)，浅灰底用 rgba(0,0,0,0.1)
• 避免卡片带 border-radius 但父容器 overflow: hidden —— 裁切会截断阴影边缘，造成“半截阴影”假象
• 慎用 backdrop-filter（毛玻璃）叠加阴影，两者混合易引发渲染不一致，尤其在 Safari 中

排查父级容器与渲染上下文影响

阴影是脱离文档流的绘制层，但它的显示受祖先元素的 transform、will-change、filter 或 clip-path 影响极大。一个 transform: scale(0.999) 就可能导致阴影像素级模糊。

• 检查卡片直系父容器是否设置了 overflow: hidden、clip-path 或 mask
• 避免在卡片或其父级上滥用 transform: translateZ(0) 或 will-change: transform，除非真有动画需求
• 在 Chrome DevTools 的 “Rendering” 面板中开启 “Paint flashing”，观察阴影是否被意外重绘或裁剪

用 CSS 自定义属性实现灵活又一致的阴影系统

把阴影逻辑抽成 CSS 变量，既便于全局调整，也避免散落各处的 magic number：

:root {
  --shadow-xs: 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
}

然后卡片统一使用：

.card { box-shadow: var(--shadow-md); }

• 所有卡片组件复用同一组变量，改一处，全站同步
• 配合 CSS @layer 或 BEM 命名，确保变量作用域清晰，不被覆盖
• 搭配 @media (prefers-reduced-motion: reduce) 关闭动画时，也可同步降级阴影（如改用 --shadow-xs）

基本上就这些。阴影看着小，其实是 CSS 渲染链上很敏感的一环。不复杂，但容易忽略上下文。统一参数 + 控制背景 + 排查父级 + 变量管理，四步下来，卡片就能稳稳“浮”在该在的位置。