table元素不支持box-shadow: inset内阴影，因表格渲染模型限制，尤其border-collapse: collapse下必然失效；稳定方案只有伪元素模拟（::before+position:relative+z-index:-1）或background-image渐变伪造。
table 元素本身不支持 box-shadow 内阴影
直接给 <table> 或 <td> 设置 box-shadow: inset ... 看似可行，但多数浏览器（尤其是 Chrome 和 Safari）会忽略内阴影，因为表格单元格的渲染模型不触发标准盒阴影绘制逻辑。这不是写法错误，而是规范限制——box-shadow 的 inset 模式在 border-collapse: collapse 下几乎必然失效。
真正能稳定生效的路径只有两条：用伪元素模拟，或改用 background-image 渐变伪造阴影感。
用 ::before 伪元素在 td 内叠加内阴影
这是最可控、兼容性好（IE11+）、且支持圆角和透明度的方案。核心思路是让 <td> 设为 position: relative，再用绝对定位的 ::before 覆盖内部区域并加 inset 阴影。
-
td必须设置position: relative，否则伪元素无法精确定位 -
::before的z-index要低于内容（比如设为-1），避免遮挡文字 - 阴影偏移量建议用
0 0 4px rgba(0,0,0,0.1)，太大容易糊掉边框细节 - 若表格有
border-collapse: collapse，需额外给td加padding，否则伪元素会压住相邻单元格边界
td {
position: relative;
padding: 8px;
}
td::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
}
用 background-image 渐变替代 box-shadow 实现“软内边”效果
当需要更高性能（尤其大量单元格）或兼容极老环境时，用多层 linear-gradient 模拟阴影更轻量。它不依赖渲染层叠，无重绘风险，但无法动态调整模糊度。
立即学习“前端免费学习笔记（深入）”；
- 本质是三段渐变：顶部浅灰 → 中间透明 → 底部浅灰，形成「凹陷」错觉
- 必须配合
background-clip: padding-box，否则渐变会溢出到 border 区域 - 慎用
border-radius：CSS 渐变不自动裁圆角，需同步设置overflow: hidden或用mask - IE 不支持多背景逗号分隔写法，如需兼容，得降级为单层渐变或放弃
td {
background-image:
linear-gradient(to bottom, #f0f0f0 0%, transparent 10%),
linear-gradient(to top, #f0f0f0 0%, transparent 10%);
background-size: 100% 4px, 100% 4px;
background-position: top, bottom;
background-repeat: no-repeat;
background-clip: padding-box;
}
为什么不要用 outline + clip-path 做内阴影？
有人尝试用 outline 配合 clip-path: inset(...) 切出内边框效果，这在部分 Chrome 版本里能短暂显示，但存在三个硬伤：
-
outline不响应inset，只能靠裁剪“露出”一部分，实际不是阴影，是色块错位 -
clip-path: inset()在 Firefox 中对表格单元格支持极差，常导致整行渲染异常 - 滚动时易出现闪烁或裁剪错位，尤其在 hidpi 屏幕下
这种写法看着省事，实则埋了不可预测的渲染雷，线上项目应主动避开。
真正稳定的内阴影，永远绕不开「伪元素覆盖」或「背景渐变模拟」这两条路。选哪条取决于你是否需要模糊过渡（选伪元素）、是否要兼顾低端设备（选渐变）、以及表格是否有复杂合并单元格（伪元素更可控）。别被 box-shadow: inset 的字面意思带偏——表格的盒模型，从来就不按常规出牌。
