直接给 table 加 inset 阴影无效，因表格默认 border-collapse: collapse 会裁剪阴影，且缺乏可渲染的 padding 和背景区域；可靠方案是将 table 包裹在带 padding 和背景色的 div 中，并对该 div 应用 inset 阴影。
直接给 table 加 inset 阴影无效？原因和替代方案
不能直接在 table 元素上用 box-shadow: inset ... 实现可靠内阴影——因为表格默认的渲染模型（尤其是 border-collapse: collapse）会让阴影被裁剪或完全不可见，且 inset 阴影依赖容器有明确的 padding 和背景填充区域，而原生 table 没有可填充的“内边距空间”。
真正可行的做法是：把 table 包进一个带 padding 的 div 容器，再对这个 div 应用 inset 阴影。此时阴影会落在 div 内壁，视觉上就是“表格被压入背景中”的内陷感。
- 必须设
div的padding（如12px），否则inset无处落脚 -
div要有显式背景色（如background: #fff），否则内阴影颜色会透出底层 -
table自身需设margin: 0，避免额外空白干扰内陷视觉
inset 参数顺序写错就失效：必须放最后或最前
box-shadow: 0 0 8px rgba(0,0,0,0.2) inset 是合法写法；但 box-shadow: 0 0 8px inset rgba(0,0,0,0.2) 在 Safari 旧版和部分 Android WebView 中会被忽略——inset 关键字必须紧贴末尾，或置于整条声明开头（inset 0 0 8px rgba(0,0,0,0.2)）。
浏览器不报错，但阴影不显示，调试时容易卡住。建议统一用末尾写法，降低兼容风险。
立即学习“前端免费学习笔记（深入）”；
- 参数顺序硬性要求：
h-offset v-offset blur-radius spread-radius color inset -
inset不是可选修饰符，而是独立关键字，位置错即解析失败 - 不要省略
blur-radius（哪怕设为0），否则部分引擎可能跳过整条规则
模拟“表格内阴影”的实际 CSS 示例
以下是最小可行配置，能稳定呈现底部微凹+边缘压暗的内陷效果：
.table-inset-wrapper {
padding: 12px;
background: #fff;
box-shadow: inset 0 4px 12px -4px rgba(0, 0, 0, 0.08);
}
.table-inset-wrapper table {
margin: 0;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
关键点说明：
-
-4px的spread-radius把阴影向内收缩，避免四角发虚溢出 -
inset 0 4px ...让阴影只出现在顶部边缘下方，模拟“被按下去”的抬升错觉 -
border-collapse: separate是必须项，否则单元格边框合并会破坏阴影轮廓
为什么不用 outline 或 text-shadow 替代？
有人尝试用 outline 模拟内边框、或用多层 text-shadow 压表格文字来伪造内陷——这些方法都不可靠：
-
outline不支持圆角、无法控制模糊，且会叠加在元素外侧，与“内”矛盾 -
text-shadow只影响文字，对表头th、边框、空白单元格完全无效 - 纯 CSS 滤镜（如
drop-shadow()）不支持inset，且性能开销更大
真正可控的内阴影，目前只有包裹容器 + inset 这一条路。别绕远，也别硬套在 table 上——它不是设计来承载内阴影的元素。
