直接给加inset阴影无效，因其默认无内边距且border-collapse:collapse导致阴影被内容遮挡；可靠方案是用外阴影+负spread-radius配合margin或transform模拟下沉感。
直接给 内阴影是从元素的 border 边缘向内绘制的，但标准表格： 想让表格看起来“压进背景里”，比硬套 单个单元格支持 将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。 移动端小屏上，负 spread 或强 inset 容易让阴影“糊成一团”，不是参数失效，而是像素密度和渲染精度导致视觉失真。 真正可靠的“内陷感”从来不是靠一个 <table> 加 <code>inset 阴影基本无效——因为表格默认没有内边距，阴影被内容完全盖住，视觉上根本看不到。
为什么
box-shadow: inset 在表格上不显示border-collapse: collapse 时 border 被合并、padding 通常为 0、内容紧贴单元格边缘，导致 inset 阴影区域被完全遮挡。这不是 bug，是渲染逻辑使然。
box-shadow: inset 0 0 8px rgba(0,0,0,0.1) 却没效果？大概率是这个原因overflow: hidden 会进一步裁掉内阴影区域，必须禁用padding，<table> 的盒模型对 <code>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> 的 <code>box-shadow: inset
inset 更稳定，但需满足三个前提：
border-collapse 改成 separate，否则 border-spacing 不生效，单元格无法独立渲染<td> 必须设 <code>padding: 4px（至少），否则阴影仍不可见
<table> 设 <code>overflow: hidden，它会裁掉所有子元素的内阴影
td { padding: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); }
响应式场景下容易忽略的细节
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> 加 <code>inset 阴影——重绘开销陡增，卡顿明显
inset 关键字实现的；它依赖 padding 留白、shadow 参数协同、以及外层容器的视觉锚定。表格结构天生不适合纯内阴影，绕过限制比强行适配更省力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
