最常用且稳定的是直接给 <table> 加 box-shadow；filter: drop-shadow() 适合贴合不规则轮廓，但避免用于滚动或动画场景。
直接给 <table> 加 box-shadow 最常用也最稳；filter: drop-shadow() 适合需要贴合不规则轮廓的场景，但别在滚动列表或动画里乱用。
table 元素加 box-shadow 为什么有时没效果？
常见现象是阴影“消失”或只显示半边——根本原因是 border-collapse: collapse 和 overflow: hidden 的组合干扰了渲染边界。
- 如果表格用了
border-collapse: collapse（默认值），box-shadow仍能生效，但圆角border-radius会被裁掉，必须配合overflow: hidden才能显出弧度 - 若表格有
overflow: auto或父容器设置了overflow: hidden，可能把阴影直接剪掉，得检查层叠上下文和裁剪边界 - 背景色缺失会让阴影不明显，务必给
<table>显式设background-color（哪怕只是#fff）
drop-shadow() 和 box-shadow 语法一样吗？
写法看着像，但行为完全不同：前者吃透 Alpha 通道，后者只认矩形盒子。
-
box-shadow: 0 2px 4px rgba(0,0,0,0.1)—— 只围绕<table>的 width/height 投影，伪元素、圆角、透明区域全被忽略 -
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1))—— 会沿着表格实际像素边缘（包括border-radius裁剪后的形状）投射，更“贴身” -
drop-shadow()不支持第四个参数（spread）和inset，写成drop-shadow(0 2px 4px 2px #000)会静默忽略最后一个值
给 td/th 单独加阴影要避开什么坑？
想让每个单元格都有独立浮起感？别直接套 box-shadow 就完事。
- 必须关掉
border-collapse: collapse，改用border-collapse: separate，否则单元格之间没间隙，阴影挤在一起糊成一片 - 配
border-spacing: 8px控制单元格间距，阴影才有空间展开；数值太小（如1px）会导致阴影重叠难分辨 -
td, th加box-shadow后，如果内容撑高不一致，阴影高度会参差，建议统一设vertical-align: top或最小行高
性能敏感场景下怎么选？
页面有滚动、hover 动画或大量表格行时，filter 开销比 box-shadow 高一截，尤其在中低端 Android 设备上容易掉帧。
- 静态卡片、弹窗、后台管理页的配置表格 → 优先用
box-shadow+border-radius - 带气泡箭头的 Tooltip、SVG 图标表格、PNG 透明底数据图 → 必须用
drop-shadow()，否则箭头或镂空部分没阴影 - 列表项 hover 时想加强阴影？别对整行加
filter，改用box-shadow配transition更轻量
真正麻烦的不是加阴影，而是阴影在不同缩放、不同 DPR 屏幕、不同 overflow 设置下的表现不一致——动手前先在真机上拖拽滚动几下，比看代码更管用。
