如何给HTML表格添加内阴影？BOX-SHADOW美化单元格立体感-html教程-PHP中文网

table元素不支持box-shadow: inset内阴影，因表格渲染模型限制，尤其border-collapse: collapse下必然失效；稳定方案只有伪元素模拟（::before+position:relative+z-index:-1）或background-image渐变伪造。

如何给html表格添加内阴影？box-shadow美化单元格立体感

table 元素本身不支持 box-shadow 内阴影

直接给 <table> 或 <code><td> 设置 <code>box-shadow: inset ... 看似可行，但多数浏览器（尤其是 Chrome 和 Safari）会忽略内阴影，因为表格单元格的渲染模型不触发标准盒阴影绘制逻辑。这不是写法错误，而是规范限制——box-shadow 的 inset 模式在 border-collapse: collapse 下几乎必然失效。

真正能稳定生效的路径只有两条：用伪元素模拟，或改用 background-image 渐变伪造阴影感。

用 ::before 伪元素在 td 内叠加内阴影

这是最可控、兼容性好（IE11+）、且支持圆角和透明度的方案。核心思路是让 <td> 设为 <code>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;
}