最常用且稳定的是直接给 加 box-shadow；filter: drop-shadow() 适合贴合不规则轮廓，但避免用于滚动或动画场景。
直接给 常见现象是阴影“消失”或只显示半边——根本原因是 写法看着像，但行为完全不同：前者吃透 Alpha 通道，后者只认矩形盒子。 想让每个单元格都有独立浮起感？别直接套 页面有滚动、hover 动画或大量表格行时， 真正麻烦的不是加阴影，而是阴影在不同缩放、不同 DPR 屏幕、不同 overflow 设置下的表现不一致——动手前先在真机上拖拽滚动几下，比看代码更管用。<table> 加 <code>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> 显式设 <code>background-color（哪怕只是 #fff）
drop-shadow() 和 box-shadow 语法一样吗？
box-shadow: 0 2px 4px rgba(0,0,0,0.1) —— 只围绕 <table> 的 width/height 投影，伪元素、圆角、透明区域全被忽略
<li>
<code>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 或最小行高性能敏感场景下怎么选？
filter 开销比 box-shadow 高一截，尤其在中低端 Android 设备上容易掉帧。
box-shadow + border-radius
drop-shadow()，否则箭头或镂空部分没阴影filter，改用 box-shadow 配 transition 更轻量
