直接给table加box-shadow无效是因table默认display: table的盒模型特殊，边框合并且无外延空间；应改用div包裹并设border-collapse: separate、overflow: hidden等配合生效。
直接给table加box-shadow为什么没效果
不是你写错了，是table的默认渲染行为导致阴影被裁剪或压根不显示。它默认是display: table，盒模型特殊：边框合并（border-collapse: collapse）、内容撑满、且没有独立的“外延空间”来承载阴影。DevTools里能看到box-shadow声明存在，但computed值里常被忽略或截断。
常见错误现象：box-shadow: 0 2px 8px rgba(0,0,0,0.15)写了却完全看不见；检查父容器overflow为hidden，或table自身border-collapse: collapse还在生效。
- 别指望
table像div一样直接响应box-shadow——这是浏览器规范行为，不是bug -
border-radius单独加在table上也无效，除非先切掉border-collapse - 哪怕加了
padding，阴影仍可能被table的内部盒模型吞掉
最稳妥的做法：用div包裹table再加阴影
绕过table的限制，把阴影加在语义中立、渲染行为标准的div上，兼容性好、控制力强、调试直观。
关键配置必须同步到位：
-
.table-wrapper { box-shadow: 0 2px 12px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }——overflow: hidden要加在div上，否则圆角+阴影会溢出 -
.table-wrapper table { border-collapse: separate; border-spacing: 0; width: 100%; }——border-collapse: separate是必须项，否则border-spacing无效，且table边界模糊，阴影边缘发虚 - 如果表格宽度不固定，建议给
div设width: fit-content或明确值，避免阴影被拉宽失真
box-shadow参数写错导致阴影异常
语法顺序和单位缺失是高频失效原因。浏览器对box-shadow解析严格，错一个位置或漏一个px就整条失效。
标准顺序是：h-offset v-offset blur-radius spread-radius color inset，前两项必填，其余可省略但不能乱序。
- 写成
box-shadow: 0 0 10 #000？缺单位（10px）和颜色格式（应为rgba()或#000），整条被忽略 - 想只显底部阴影？用
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1)—— 负的spread-radius收窄阴影，避免盖住下边框 - 多层阴影用逗号分隔，但每层参数必须完整：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08)，不能省略中间某项
极简替代方案：outline + filter: drop-shadow()
如果DOM结构不能改（比如CMS输出的纯table），又不想引入额外包裹层，可用这个轻量hack。
原理是用outline制造视觉偏移，再用filter投射阴影，不改变布局，但要注意局限：
table { outline: 2px solid transparent; outline-offset: 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1)); }-
filter: drop-shadow()基于像素运算，能贴合实际轮廓（比如圆角），但性能开销比box-shadow高，滚动区域慎用 - 旧版Safari对
filter支持不稳定，且无法和transform同时触发硬件加速 - 这不是标准方案，仅适合临时补救或简单场景
真正容易被忽略的点是：阴影是否被父容器的overflow: hidden裁掉，以及table是否还残留border-collapse: collapse。这两个问题不解决，其他所有参数调得再准也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
