box-shadow显示不出来通常因父容器overflow:hidden裁剪、语法错误（如负模糊值）、层叠上下文限制或背景透明导致；应检查computed样式、修正语法、调整z-index及背景色。
box-shadow 显示不出来，通常不是属性写错了，而是被其他样式或布局规则“盖住”或“隐藏”了。关键得看阴影是否真的没渲染，还是渲染了但看不见。
检查元素是否有足够空间容纳阴影
box-shadow 是向外绘制的，如果父容器设置了 overflow: hidden，超出部分会被裁剪——阴影就消失了。
- 打开浏览器开发者工具（F12），选中目标元素，查看 computed 样式里的 overflow 值
- 临时把父级的 overflow: hidden 改成 visible 或删掉，看阴影是否出现
- 如果父容器是 flex / grid 容器且设了 align-items: center 等，也可能导致子元素被挤压，间接影响阴影显示区域
确认 box-shadow 语法和值是否合法
常见错误：少写参数、颜色写错、模糊半径为负数（不允许）、用了不支持的关键字。
- 基础格式：box-shadow: h-offset v-offset blur-radius spread-radius color inset;
- blur-radius 和 spread-radius 必须 ≥ 0；负值会导致整条声明失效（浏览器会忽略该条 box-shadow）
- 颜色建议写全（如 #000、rgba(0,0,0,0.2)），避免只写 black 却被 CSS 重置规则覆盖
- 多个阴影用逗号分隔，不要漏掉逗号，也不要多加逗号导致解析中断
排查层级（z-index）和堆叠上下文问题
阴影属于元素自身的一部分，但它在绘制时受当前层叠上下文限制。如果元素被其他内容遮挡，或者自己没形成新层叠上下文，阴影可能被压在底层。
立即学习“前端免费学习笔记（深入）”；
- 给该元素加 position: relative（或其他非 static），再配合 z-index: 1，确保它在同级中“浮起来”
- 检查是否有兄弟元素设置了更高的 z-index，或父容器触发了层叠上下文（如 opacity < 1、transform、filter 等），导致阴影被限制在局部上下文中
- 阴影不会突破其所在层叠上下文的边界，所以即使阴影数值很大，也出不去这个“盒子”
留意透明背景与视觉干扰
阴影默认是半透明黑（rgba(0,0,0,0.2)），如果元素背景也是深色或透明，阴影可能“融”进去看不出来。
- 临时把 box-shadow 改成高对比度值测试，比如：box-shadow: 0 0 10px 3px red;
- 确保元素本身有背景（哪怕 background: white）或边框，避免阴影和页面底色混为一体
- 移动端 WebKit 内核有时对 inset 阴影支持较弱，若用 inset，优先测试真实设备
不复杂但容易忽略。多数时候，开控制台点两下 overflow 和 computed，就能定位到问题。
