给 添加 box-shadow 时，许多前端开发者都遇到过问题——代码看起来正确，但阴影无法显示。根本原因在于 table 默认的 display: table 并非标准块级盒子，且部分旧版浏览器对其盒模型渲染不支持阴影。这是 CSS 规范和浏览器实现的历史遗留问题。
解决方案很简单：不要直接针对 table 操作，而是为其添加一个容器即可。
box-shadow 对 table 元素本身不起作用？
是的，直接给 标签设置 box-shadow，大多数情况下不会生效。因为 table 默认是 display: table，它本身不是块级盒子，而且某些浏览器（尤其是旧版 Chrome/Safari）对其阴影渲染支持较弱。这不是代码错误，而是规范层面的限制。
真正有效的做法是：将 table 包裹在一个具有明确盒模型的容器中，然后将阴影赋予该容器。
- 推荐使用
包裹
，容器保持默认 display: block 即可
- 容器必须设置非透明的背景色，否则阴影会透到下层内容上
- 注意：如果
table 使用了 border-collapse: collapse，外层阴影可能会被表格边缘部分遮挡，建议留出白边
正确写法：用 div 容器 + box-shadow
这是最稳定、兼容性最好的方案。让容器负责阴影显示，table 保持其语义表格的职责。
padding 非常关键——它为阴影留出绘制空间，否则阴影可能被容器边缘裁切background 必须显式设置，即使是 #fff。容器透明的话，阴影会直接叠在父元素的背景上，效果完全失效- 千万不要在容器上添加
overflow: hidden，除非你确定阴影不需要超出容器边界——它会直接裁切阴影
table 设置 display: block 后能直接加 box-shadow 吗？
理论上可以，但副作用较大。将 table 强制改为块级元素后，box-shadow 确实会生效，但布局行为会变得难以控制：
width: 100% 不再自动撑满父容器，需要手动指定宽度- 单元格的
border 和 padding 可能因盒模型变化出现错位
- 响应式场景下更容易出错，例如
table-layout: fixed 与 display: block 配合使用时容易崩溃
示例（谨慎使用）：
阴影太淡或太重？调参要点
box-shadow 的四个参数中，最容易让人纠结的是第三项（模糊半径）和第四项（扩散半径）。其实参数并不复杂，记住几个原则即可：
- 第二项（垂直偏移）建议使用正值（如
2px），避免阴影飘到表格上方，视觉上会显得失重
- 第三项（模糊值）超过
12px 在多数 UI 中会显得发虚；低于 4px 则更像描边而不是阴影
- 第四项（扩散）为正时扩大阴影范围，常配合小模糊值使用，例如
0 2px 4px 2px rgba(0,0,0,0.1)
- 颜色透明度不要设置太高，
rgba(0,0,0,0.3) 以上就容易压暗表格中的文字，降低可读性
参数本身并不难调整，真正需要关注的是容器背景色、表格文字颜色以及周围元素间距这三者的协同配合——阴影只是整体画面的一部分，视觉效果好不好，取决于整体搭配。
