box-shadow不可见的三大主因是颜色与背景无对比、元素无渲染尺寸、父容器overflow:hidden裁剪；需检查颜色值、设置宽高或背景、调整父容器overflow或内边距。
box-shadow 的颜色和透明度被忽略
常见现象是设置了 box-shadow 却完全看不到阴影，尤其在浅色背景上。最常被忽略的是颜色值本身——如果写成 box-shadow: 0 0 10px #fff;，白色阴影在白色背景上自然不可见；同理，rgba(0,0,0,0) 或 transparent 也会导致“阴影存在但不可见”。
- 检查颜色是否与背景有足够对比度，临时换成
rgba(0,0,0,0.5)快速验证 - 避免直接用
#fff、#000等不带透明度的纯色，除非你明确知道背景色 - 注意 CSS 预处理器（如 Sass）中变量未正确解析，导致最终生成的颜色值为空或非法
元素没有尺寸或背景导致阴影“消失”
box-shadow 是作用在元素**渲染盒（rendering box）**上的，如果元素宽高为 0、没有内容、且 background 和 border 都为空，它就没有任何可投影的区域，阴影自然不会出现。
- 给元素加临时
background: red;和width: 100px; height: 100px;看是否立刻出现阴影 - 对空标签（如
）必须显式设置尺寸，或用min-height/padding建立盒模型 - 使用
display: inline的元素默认不响应box-shadow的宽高逻辑，改用inline-block或block
阴影被父容器 overflow 裁剪
这是最隐蔽也最高频的问题：父级设置了 overflow: hidden（尤其是卡片、模态框、轮播容器），而阴影超出其边界，直接被裁掉。
- 临时给父容器加
overflow: visible !important;看阴影是否恢复 - 若不能改父容器，可尝试用
transform: translateZ(0)或will-change: transform触发新层叠上下文，有时能绕过裁剪（但非万能） - 更稳妥的做法是扩大父容器内边距（
padding）或调整子元素margin，为阴影留出空间
z-index 和层叠上下文干扰阴影显示
阴影属于元素自身的绘制层，但如果该元素被其他元素用 z-index 盖住，或者它自己触发了层叠上下文（如 opacity 、transform、filter），可能导致阴影被压在底层甚至被截断。
立即学习“前端免费学习笔记（深入）”；
- 检查是否有兄弟元素设置了更高
z-index且定位重叠 - 确认元素自身没意外触发层叠上下文（比如写了
opacity: 0.99却以为只是“几乎不透明”） - 用浏览器开发者工具的“Rendering”面板开启
Paint flashing，观察阴影是否真的被绘制出来
/* 快速诊断模板：复制到元素样式中逐项验证 */ box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; background: #f8f9fa !important; width: 200px !important; height: 100px !important; position: relative !important; overflow: visible !important;
真正卡住的时候，往往不是语法写错，而是阴影画出来了，却被别的规则悄悄吃掉了。多看一眼 computed 样式里的 box-shadow 是否被覆盖，再点开“Layout”看元素实际尺寸和父容器 overflow 状态，比反复调参数更快。
