直接给<table>加inset阴影无效，因其默认无内边距且border-collapse:collapse导致阴影被内容遮挡；可靠方案是用外阴影+负spread-radius配合margin或transform模拟下沉感。
直接给 <table> 加 inset 阴影基本无效——因为表格默认没有内边距，阴影被内容完全盖住，视觉上根本看不到。
为什么 box-shadow: inset 在表格上不显示
内阴影是从元素的 border 边缘向内绘制的，但标准表格：border-collapse: collapse 时 border 被合并、padding 通常为 0、内容紧贴单元格边缘，导致 inset 阴影区域被完全遮挡。这不是 bug，是渲染逻辑使然。
- 检查是否写了
box-shadow: inset 0 0 8px rgba(0,0,0,0.1)却没效果？大概率是这个原因 -
overflow: hidden会进一步裁掉内阴影区域，必须禁用 - 即使强制加
padding，<table>的盒模型对inset支持也不稳定，尤其在不同浏览器中表现不一致
真正可用的“内陷”替代方案：用外阴影 + 位移模拟
想让表格看起来“压进背景里”，比硬套 inset 更可靠的做法，是用一组精心配比的外阴影 + 负 margin 或 transform 微调，制造视觉下沉感。
- 核心技巧：
box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15)—— 负的spread-radius（第四个值）能收缩阴影范围，让边缘更锐利，“贴”得更近 - 搭配
margin-bottom: -4px或transform: translateY(1px)，轻微下拉表格本体，强化“嵌入”错觉 - 如果表格外层有容器，可在该容器上加
box-shadow: inset 0 -2px 6px rgba(0,0,0,0.05)，只作用于容器底边，模拟轻微压痕
如果非要单元格级“内凹”，改用 <td> 的 box-shadow: inset
单个单元格支持 inset 更稳定，但需满足三个前提：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 把
border-collapse改成separate，否则border-spacing不生效，单元格无法独立渲染 - 每个
<td>必须设padding: 4px（至少），否则阴影仍不可见 - 避免给
<table>设overflow: hidden，它会裁掉所有子元素的内阴影 - 示例：
td { padding: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); }
响应式场景下容易忽略的细节
移动端小屏上，负 spread 或强 inset 容易让阴影“糊成一团”，不是参数失效，而是像素密度和渲染精度导致视觉失真。
- 别在媒体查询里只缩
blur-radius，必须同步调整v-offset和spread-radius，比如从0 4px 12px -4px改为0 2px 6px -2px - 深色模式下，
rgba(0,0,0,0.15)可能太淡，需额外覆盖：@media (prefers-color-scheme: dark) { td { box-shadow: inset 0 1px 3px rgba(255,255,255,0.05); } } - 性能敏感场景（如滚动表格），避免给每个
<td>加inset阴影——重绘开销陡增，卡顿明显
真正可靠的“内陷感”从来不是靠一个 inset 关键字实现的；它依赖 padding 留白、shadow 参数协同、以及外层容器的视觉锚定。表格结构天生不适合纯内阴影，绕过限制比强行适配更省力。
