drop-shadow对table无效，因其无alpha通道轮廓，仅退化为矩形投影；真正生效需用div模拟表格布局并包裹drop-shadow。

HTML 表格本身是矩形结构，filter: drop-shadow 对它无效——不是语法错，而是表格没有 Alpha 通道轮廓可提取，阴影依然套在矩形盒上，和 box-shadow 效果几乎一样。

为什么 table 元素加 drop-shadow 没有“不规则”效果

drop-shadow() 依赖元素渲染层的 Alpha 通道（透明像素边界），而原生 <table> 及其子元素（<code><tr>、<code><td>）始终按 box-model 矩形布局，即使设置了 <code>border-radius 或 clip-path，浏览器也不会为它们生成独立 Alpha 图层。DevTools 的 Layers 面板里看不到对应蒙版层，就说明 drop-shadow 实际退化为盒模型投影。

• 验证方法：选中表格元素 → 打开 DevTools → Layers 面板 → 查看是否出现 “Alpha mask” 或 “Image layer with alpha” 类型图层
• 常见误判：看到圆角或虚线边框就以为“不规则”，但这些只是视觉修饰，底层仍是矩形盒
• 真正触发 Alpha 轮廓的必须是：透明 PNG / SVG / mask-image / clip-path 作用于**块级容器**（如 <div>），而非表格语义元素 <h3>想让表格“看起来不规则”，得先脱离 table 语义结构</h3> <p>把数据用 <code><div> 模拟表格布局，再套 Alpha 可控容器。这是唯一能真正用上 <code>drop-shadow 的路径：
  • 用 display: grid 或 display: flex + grid-template-columns 复现表头/行/列对齐，避免 <table><li>最外层包裹一个 <code><div class="table-wrapper">，所有内容（含伪元素箭头、切角装饰）都放里面 <li>给 <code>.table-wrapper 加 filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12))，且确保它没设 overflow: hidden
  • 如果需要“气泡式”带尾巴的表格卡片，用 ::before 在 .table-wrapper 内画三角，它会自动被 drop-shadow 包裹

  示例关键 CSS：

  
  使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
  如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
  下载

  `.table-wrapper {
    position: relative;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
  }
  .table-wrapper::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 20px;
    width: 0; height: 0;
    border: 6px solid transparent;
    border-top-color: #fff;
  }`

  drop-shadow 用在表格模拟容器上的参数雷区

  哪怕结构改对了，参数写错照样糊成一团：

  • blur-radius 超过 6px 就容易“膨胀”——尤其当表格宽度小、字体细时，阴影会明显偏离真实边缘
  • 别写 filter: drop-shadow(2px 2px 8px 2px #000) —— 第四个值（spread）被忽略，还可能让部分 Safari 解析失败
  • 颜色别用纯黑 #000，优先用 rgba(0,0,0,0.12)，否则阴影在浅色背景上太重，盖住下层内容
  • 禁用 overflow: hidden：它会裁掉阴影溢出部分，导致阴影“断掉”，看起来像没生效

  真正难点不在代码怎么写，而在判断“这个表格是否值得用 drop-shadow”——如果只是普通数据表格，box-shadow 加 border-radius 更轻量；只有当视觉上明确需要贴合锯齿、气泡、SVG 图标等非矩形边缘时，才值得走 div+grid+drop-shadow 这条路。