给 table 元素添加 box-shadow 却发现阴影没有显示出来？这种 CSS 表格阴影失效的问题在实际开发中非常常见。最根本的原因，通常是 border-collapse: collapse 属性在起作用。
该属性会将表格的外边框“收拢压缩”，而 box-shadow 阴影是渲染在盒模型最外层的，边缘被折叠后自然就没有承载阴影的空间。解决 table 阴影不显示的方案有多种，我们按推荐程度逐一说明。
table 的 box-shadow 不起作用？优先检查 border-collapse 属性
打开浏览器开发者工具，在 Computed 面板中检索 border-collapse，若显示值为 collapse，即可确定是它导致阴影失效。不必急于移除该属性，更稳妥的策略是切换为其他渲染模式。
- 将
border-collapse调整为separate，同时设置border-spacing: 0，视觉上依然保持无缝拼接效果。 - 需要注意：IE 浏览器对
border-spacing在collapse模式下的兼容性表现不佳，且一旦赋予非零数值，所有单元格间距均会随之改变。 - 若表格中使用了
colspan或rowspan跨单元格合并，在separate模式下某些老旧浏览器可能出现布局错位。
通过 div 包裹 table 实现阴影是最稳妥的解决方案
无需修改表格的渲染机制，也不改动现有 CSS 代码，仅添加一个语义中性的外层容器，这是生产项目中最常用的 CSS 表格阴影解决方案。兼容性出色、调试便捷，且不会干扰 JavaScript 对表格的操作。
核心要点不仅仅是套一个 div，更在于合理控制溢出与圆角对齐：
- 在
div上设置box-shadow与border-radius，同时必须添加overflow: hidden，否则圆角位置的阴影会向外溢出。 table本身不要设置border-radius——该属性对 table 元素不生效，圆角效果由外层div来实现。- 若表格内容宽度不固定，建议为
div指定width: fit-content或明确的宽度值，防止阴影被拉伸变形。
示例代码：
outline 配合 filter: drop-shadow() 的轻量级替代方案
在极少数特殊场景中——例如无法修改 HTML 结构或希望避免新增 DOM 层级——可使用 outline 模拟外边框，再通过 filter: drop-shadow() 为其添加投影效果。这虽非标准实现方式，但足够轻量、不影响布局、纯 CSS 即可完成。
请注意：drop-shadow() 属于 filter 滤镜函数，作用于元素的整体渲染输出，而非盒模型属性，因此不会受 border-collapse 影响。具体配置方式如下：
- 需要配置
outline: 2px solid transparent与outline-offset: 4px，创建一个可供投影的透明轮廓线。 filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15))的模糊半径不宜过大，否则边缘会显得模糊不清，在 Retina 屏幕上尤为明显。- 需要注意的是，Safari 浏览器对
filter属性的性能较为敏感，页面滚动时可能出现掉帧现象；Chrome 与 Firefox 的表现则相对稳定。
完整写法：
table { outline: 2px solid transparent; outline-offset: 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));}阴影参数难以调校？重点关注 blur-radius 与 spread-radius
很多时候觉得阴影效果“发平”，并非颜色浓度不够，而是模糊半径扩散后缺乏实边收束。实际项目中这两个细节容易被忽略：
blur-radius过大且容器设置了overflow: hidden→ 阴影被裁剪截断，导致视觉上仿佛没有呈现。- 增加一个正值的
spread-radius（例如2px）可使阴影整体向外延展，视觉上更加“扎实稳固”，同时降低被裁剪的风险。 - 移动端请谨慎使用垂直偏移超过
4px的阴影，小屏幕设备上容易产生“浮起过高”的错觉，影响信息层次感。
推荐初始参数：box-shadow: 0 2px 10px -2px rgba(0,0,0,0.08), 0 4px 16px 0 rgba(0,0,0,0.12) —— 第一层通过负 spread（-2px）收紧边缘，第二层营造立体层次感。
真正棘手的从来不是添加阴影本身，而是当表格同时具备 border-collapse: collapse、父容器带有 overflow: hidden、并且还使用了 border-radius —— 这三个条件一旦叠加，阴影便会毫无征兆地消失。动手调试前，先打开 DevTools 查看 computed 样式，远比盲目猜测高效得多。
