drop-shadow 对 table 元素本身无效，需用带 will-change 或 transform 的 wrapper 容器包裹，并避免 border-collapse: collapse；不规则表格阴影仅基于 bounding box，无法贴合 rowspan/colspan 实际形状，safari 等浏览器存在兼容性问题。
drop-shadow 对 table 元素本身无效的常见现象
直接给 <table> 设置 <code>filter: drop-shadow() 通常没效果，尤其当表格有合并单元格、空行或 border-collapse: collapse 时。这是因为 <table> 的渲染盒（rendering box）在某些浏览器中不生成独立的绘制上下文（painting context），导致 filter 无法正确作用于整个表格形状。
<h3>用 wrapper 容器包裹 table 并启用 will-change 或 transform</h3>
<p>最可靠的做法是套一层 <code><div>，并确保该容器能触发独立的层叠上下文和绘制区域：
<ul>
<li>给 wrapper 设置 <code>display: inline-block 或 display: block + overflow: hidden
will-change: filter 或 transform: translateZ(0)（任一即可），否则部分浏览器（尤其是 Safari 和旧版 Chrome）仍可能不渲染阴影<table> 自身设 <code>border-collapse: collapse 后再加阴影——它会让表格“视觉上收缩”，投影范围变小甚至消失；可改用 border-collapse: separate + border-spacing: 0 保持样式一致
<div style="display: inline-block; will-change: filter; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3))"> <table style="border-collapse: separate; border-spacing: 0;"> <tr> <td>A</td> <td rowspan="2">B</td> </tr> <tr><td>C</td></tr> </table> </div>
不规则表格（如含 rowspan/colspan）的阴影裁剪问题
即使加了 wrapper，如果表格内部存在大量跨行跨列单元格，drop-shadow() 仍可能只投在“矩形包围盒”上，而非真实轮廓——这是 CSS filter 的固有限制，它始终基于元素的几何边界框（bounding box），不是 alpha 遮罩。
- 无法通过纯 CSS 让 drop-shadow 跟随
<td rowspan="3"> 的实际像素形状投射 <li>若需精确贴合不规则形状，得导出为 SVG：把表格结构转成 <code><path></path>或用<foreignobject></foreignobject>嵌入 HTML，再对 SVG 元素应用filter - 临时 workaround：给每个
<td> 单独加 <code>filter: drop-shadow()，但会重复叠加、性能差，且无法形成统一外投影移动端与 Safari 的兼容性陷阱
Safari（尤其 iOS 15–16）对
drop-shadow()在 inline-block wrapper 上的支持不稳定，容易出现阴影偏移、闪烁或完全不显示：- 务必测试
filter: drop-shadow(0 0 8px #000)是否生效；若失效，尝试改用box-shadow+outline模拟（虽非真正投影，但视觉接近） - 不要依赖
filter: url(#shadow)引用 SVG filter——Safari 对内联 SVG filter 的跨域和解析支持极差 - 若项目需强兼容，建议用 Canvas 渲染表格快照 + 手动绘制阴影，或服务端生成带阴影的 PNG
真正难的不是写那行
filter，而是让不同尺寸、跨格、折叠状态下的表格，在各种设备上都稳定投出你想要的那一圈灰影——它本质上是在和浏览器的渲染管线较劲。 - 务必测试
