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 才有典型阴影感。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 最小可用模糊值建议从 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 值，在深色模式、高缩放比、低对比度设置下可能完全失效。动手前先确认背景、父容器裁剪、层叠顺序这三个变量。