box-shadow没效果最常见的原因是元素无实际尺寸或内容、父容器overflow:hidden裁剪阴影、颜色对比度不足；需检查尺寸、背景、overflow、颜色透明度、模糊值及z-index层叠关系。
box-shadow 属性没效果的常见原因
最常被忽略的是元素没有「实际尺寸」或「背景色/内容」，导致阴影不可见。比如 div 空着、宽高为 0、或者设置了 background: transparent 且父容器同色。另外，box-shadow 默认绘制在元素「外侧」，若父容器 overflow: hidden，阴影会被裁掉。
颜色太浅或透明度太高导致看不见
很多人用 rgba(0,0,0,0.1) 配合小模糊值（如 2px），在白底上几乎不可辨。阴影不是“有无”的问题，是“是否可感知”的问题。
- 把透明度调高到
rgba(0,0,0,0.25)或以上再观察 - 临时换一个深色背景（如
background: #f0f0f0）快速验证阴影是否存在 - 避免用
hsla(0,0%,0%,0.1)这类低对比度组合，直接改用#000测试基础效果
模糊值（blur-radius）为 0 时阴影像边框
box-shadow: 0 0 0 1px #000 看起来就是个 1px 的实线边框，容易误以为“没生效”。模糊值决定软边程度，不为 0 才有典型阴影感。
- 最小可用模糊值建议从
4px起步（如0 2px 4px rgba(0,0,0,0.15)） - 注意：模糊值不能为负数；扩散半径（spread-radius）可以为负，但别和 blur 搞混
- 大模糊值（如
24px）需配合更大偏移，否则阴影会向四周均匀晕开、变淡
z-index 和层叠上下文让阴影被遮盖
即使阴影渲染出来了，也可能被兄弟元素或伪元素（如 ::before）盖住。尤其是用了 position: relative 但没设 z-index 的场景。
立即学习“前端免费学习笔记（深入）”；
- 给带阴影的元素加
position: relative和z-index: 2（比相邻块高一级即可） - 检查父容器是否触发了新的层叠上下文（例如有
opacity 、<code>transform、will-change），这会让子元素阴影被限制在该上下文内 - 用浏览器开发者工具的「Rendering」面板勾选「Paint flashing」，看阴影区域是否真被绘制出来
box-shadow 值，在深色模式、高缩放比、低对比度设置下可能完全失效。动手前先确认背景、父容器裁剪、层叠顺序这三个变量。 
