直接给 table 加 box-shadow 常无效，因 border-collapse: collapse 导致外边框塌陷、阴影位置漂移；需用 div 包裹并设 overflow: hidden、border-radius 和 box-shadow，table 内部改用 border-collapse: separate 并加 background: #fff，宽度用 width: fit-content，阴影用负 spread-radius 实现紧贴效果。
直接给 table 加 box-shadow 为什么经常没反应
不是你写错了，是浏览器对 table 的盒模型处理特殊：默认 border-collapse: collapse 会让外边框“塌陷”，box-shadow 实际作用在不可见的逻辑边界上，导致阴影位置漂移、发虚，甚至完全不可见。更麻烦的是，table 默认 display: table，不响应 border-radius，单独加圆角也无效。
div 包裹 table 是最稳方案
把视觉装饰（阴影、圆角、裁剪）和语义结构（表格本身）职责分开：
-
.table-shadow容器必须设overflow: hidden，否则圆角处阴影会“露馅” -
.table-shadow设border-radius和box-shadow，别往table上写 -
table内部必须用border-collapse: separate，哪怕你不需要单元格间距——这是为了确保外边框轮廓清晰，阴影有明确落点 -
table建议加background: #fff，否则阴影在透明背景下容易被透出的父层干扰 - 容器宽度用
width: fit-content，避免撑满父容器导致阴影横向拉宽变形
想让阴影“贴着表格底部”？别调 v-offset，改用 spread-radius
写成 box-shadow: 0 4px 6px -2px rgba(0,0,0,0.1) —— 负的 spread-radius 会收缩阴影实边，让底部边缘更锐利，视觉上更“紧贴”。单纯加大垂直偏移（比如 0 8px）只会让整个阴影下移，看起来像飘起来。
如果发现下边框被阴影盖住，大概率是 blur-radius 太大，或者漏了 background；给 table 显式加 background: #fff 是必须步骤。
立即学习“前端免费学习笔记（深入）”；
深色模式或高 DPI 屏幕下阴影变淡/消失
这不是 bug，是对比度和渲染策略变化导致的视觉丢失：
- 深色背景下，
rgba(0,0,0,0.1)几乎看不见，得换成浅灰+更高透明度，比如rgba(255,255,255,0.15) - 高 DPI 屏幕下，模糊半径实际渲染更重，建议把
blur-radius从 12px 降到 8px 或更低 - 移动端缩放时，
overflow: hidden容易意外裁掉阴影边缘，可加padding在容器上预留绘制空间
真正麻烦的不是加阴影，而是它在不同缩放、不同 DPR、不同 overflow 设置下的表现一致性——少一个条件，效果就断层。
