table 元素不支持 box-shadow: inset 直接生效，因其 display: table 盒模型导致内阴影被裁剪或忽略；可靠方案是用带背景、padding 和 border-radius 的 div 包裹 table，或对 th/td 单独设置 inset 阴影并确保 border-collapse: separate。

table 元素不支持 box-shadow: inset 直接生效

直接给 table 写 box-shadow: inset 0 2px 6px rgba(0,0,0,0.1) 几乎不会显示内阴影——不是你写错了，是浏览器渲染限制：table 的盒模型（display: table）导致 inset 阴影被裁剪或忽略，尤其在 Chrome 和 Firefox 中。DevTools 里能看到样式声明存在，但 computed 值中 box-shadow 可能为空或未应用。

用 div 包裹 + inset 阴影才是可靠方案

把 table 放进一个 div 容器，对这个 div 应用 inset 阴影，同时确保容器有明确尺寸和背景，才能让“下沉感”真实可见：

• div 必须设 background-color（哪怕只是 #fff），否则透明背景下内阴影不可见
• 容器需有足够 padding（如 16px），否则阴影会紧贴表格边缘，失去“压入”视觉效果
• border-radius 要配合使用，否则圆角处阴影断裂；同时加 overflow: hidden 防止溢出
• 示例 CSS：

  .table-inset {
    background: #f9f9f9;
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.08);
  }

单元格级内阴影需单独处理 th/td

如果目标是让每个单元格呈现“凹陷”感（比如模拟按钮或输入框的按压效果），不能依赖 table 或包裹 div，而要直接作用于 th 和 td：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 必须设 border-collapse: separate，否则 inset 阴影会被合并边框干扰
• 每个单元格需有独立 background 和 padding，否则无渲染区域，阴影无效
• 推荐写法：

  th, td {
    background: #fff;
    padding: 12px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
  }

• 注意性能：大量单元格逐个加 inset 阴影可能触发重绘，小表格没问题，超百行建议只用于关键列

filter: drop-shadow() 不支持内阴影，别试

filter: drop-shadow(0 -2px 4px rgba(0,0,0,0.1)) 看起来像上移阴影，但它本质是基于元素轮廓的外投影，无法实现真正的内陷效果。它会绕过圆角、透明区域，且不识别 inset 关键字——写了也当没写。真要模拟“上浮+内陷”组合效果，得用伪元素 + transform + 外阴影叠加，但那已超出纯内阴影范畴。

立即学习“前端免费学习笔记（深入）”；

实际做时最容易被忽略的是：内阴影不是“加了就下沉”，它依赖容器背景、留白空间和盒模型状态三者协同。少一个，效果就断层。