table加box-shadow无效的主因是border-collapse: collapse压扁外边缘，解决方案依次为：1.改用border-collapse: separate并设border-spacing: 0；2.用带overflow: hidden和border-radius的div包裹table；3.轻量方案用outline+filter: drop-shadow()。
直接给 table 加 box-shadow 没反应？先查 border-collapse
绝大多数情况下，table 元素加了 box-shadow: 0 2px 8px rgba(0,0,0,0.1) 却看不到阴影，是因为默认的 border-collapse: collapse 把表格的外边缘“压扁”了——而 box-shadow 是画在元素盒模型最外侧的，没边缘就无处可画。
检查当前样式是否含 border-collapse: collapse（浏览器 DevTools 的 Computed 面板里搜这个属性就行）。别急着删它，更稳妥的做法是换一种渲染逻辑或结构。
- 用
border-collapse: separate替代，再配合border-spacing: 0保持视觉无缝 - 但要注意：IE 不支持
border-spacing在collapse模式下的 fallback，且一旦设了非零值，所有单元格间距都会生效 - 如果表格用了
colspan或rowspan，separate模式下某些老浏览器可能渲染错位
用 div 包裹 table 是最稳的方案
不改表格渲染逻辑，也不动现有 CSS，只需加一层语义中性、无副作用的容器。这是上线项目中最常采用的方式，兼容性好、调试直观、不影响 JS 表格操作逻辑。
关键点不是随便套个 div，而是要控制溢出和圆角对齐：
立即学习“前端免费学习笔记（深入）”；
-
div上设box-shadow和border-radius，同时必须加overflow: hidden，否则圆角处阴影会“漏出来” -
table自身不要设border-radius，它不响应这个属性；圆角由外层div承担 - 如果表格内容宽度不固定，建议给
div加width: fit-content或显式宽度，避免阴影被拉宽变形
示例代码：
<div style="box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; width: fit-content;"> <table></table> </div>
outline + filter: drop-shadow() 是轻量伪方案
极少数场景（比如不能改 HTML 结构、又不想多一层 DOM），可以用 outline 模拟外边框，再用 filter: drop-shadow() 给它“投个影”。这不是标准做法，但够轻、无布局影响、CSS-only。
注意：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
box-shadow: 0 2px 8px rgba(0,0,0,0.1) 看起来平，往往不是颜色太淡，而是模糊半径撑开了却没“实边”兜底。实际项目里容易忽略这两点：
-
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) —— 第一层收一点（-2px spread）压住边缘，第二层负责立体感。
真正麻烦的从来不是加阴影，而是表格本身有 border-collapse: collapse、父容器有 overflow: hidden、又恰好用了 border-radius —— 这三者一碰，阴影就消失得毫无征兆。动手前先打开 DevTools 看 computed 样式，比猜半天快得多。
