box-shadow被裁剪最常见原因是父容器overflow:hidden或auto，需检查上级容器overflow值并临时改为visible测试；卡片无尺寸、透明背景、语法错误、高DPI屏幕适配不当等也会导致阴影不可见。
box-shadow 样式被父容器裁剪了
最常见的情况是卡片的父元素设置了 overflow: hidden 或 overflow: auto，导致阴影被直接截掉。即使 box-shadow 本身写对了，也完全看不见。
- 检查卡片所有上级容器（尤其是最近的定位父级或 flex/grid 容器），用浏览器开发者工具逐层查看
overflow值 - 临时把父容器的
overflow改成visible测试是否恢复阴影 - 若必须保留裁剪（如轮播图容器），可改用
transform: translateZ(0)或will-change: transform触发新层叠上下文，有时能绕过裁剪逻辑（但不保证兼容所有场景）
卡片自身没有「实际尺寸」或透明背景干扰
box-shadow 作用于元素的盒模型边界，如果卡片 height 为 0、padding 和 content 为空，或者用了 background: transparent 且父背景色与阴影色相近，都会让阴影“看起来没生效”。
- 给卡片加临时
background: #fff和min-height: 100px，确认阴影是否出现 - 检查是否误用了
filter: drop-shadow()——它和box-shadow行为不同，不响应border-radius裁剪，也不受overflow影响，但只对内容区域生效 - 确保没有用
backface-visibility: hidden或transform导致层叠上下文重排，意外隐藏了阴影绘制层
box-shadow 语法写错或值被覆盖
阴影参数顺序错、缺省值误解、CSS 优先级冲突都可能导致失效。比如漏掉必填的模糊半径，或被后加载的 CSS 重置为 none。
-
box-shadow最小合法写法是：box-shadow: 0 0 8px rgba(0,0,0,0.15);——x-offset、y-offset、blur-radius不可省略；spread-radius和color可选但建议显式写出 - 用开发者工具检查 computed 样式里
box-shadow是否显示为none，如果是，往上追溯哪条规则把它覆盖了 - 避免在同一个选择器里多次声明
box-shadow，CSS 不会合并多个声明，只会取最后一条
/* ✅ 推荐：明确、可维护 */
.card {
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
}
<p>/<em> ❌ 容易出问题：模糊半径为 0 且无 color，部分浏览器可能忽略 </em>/
.card-broken {
box-shadow: 0 0 0 #000;
}阴影在某些设备或缩放比例下不可见
高 DPI 屏幕、浏览器缩放（如 125%）、或 macOS 的 subpixel 渲染可能导致极细的阴影（如 blur-radius: 1px）视觉上消失。
立即学习“前端免费学习笔记（深入）”；
- 把
blur-radius提高到至少4px，spread-radius设为正值（如2px）增强轮廓感 - 避免使用纯黑
#000，改用带透明度的灰阶色，例如rgba(0, 0, 0, 0.12)，更适应不同背景 - 真机测试时注意 Safari 对
box-shadow的渲染差异——它不支持多层阴影中的负spread-radius，遇到就拆成两个独立规则
阴影真正“不生效”的情况其实不多，多数是盒模型、层叠上下文或样式覆盖这些底层机制没理清。盯着 computed 样式里的实际值看，比反复调参数更有效。
