table元素直接加box-shadow无效的主因是父容器裁剪或border-collapse:collapse导致边缘模糊，解决方案是将阴影加在包裹div上或设border-collapse:separate并配border-spacing:0。
table 元素直接加 box-shadow 为什么没效果？
最常见的情况是阴影被父容器裁掉了，不是代码写错。检查两个关键点：overflow: hidden 和 border-collapse: collapse。前者会让阴影直接消失；后者会让 box-shadow 边界模糊、边缘发虚，尤其在圆角场景下明显。
解决方案很直接：
- 把
box-shadow加在包裹<table> 的 <code><div> 上，而不是 <code><table> 自身（除非你确认它没被裁） <li>如果非要加在 <code><table> 上，必须设 <code>border-collapse: separate，再配border-spacing: 0 - 给外层
<div> 加 <code>overflow: hidden和border-radius，两者要配套用，否则圆角处阴影会溢出如何让表格“浮起来”而不是“糊成一团”？
阴影参数一乱，表格就显得沉、重、不透气。核心是控制方向感和收敛感：垂直偏移（v-offset）必须非零，扩散半径（spread-radius）建议为负值来收紧边缘。
推荐组合：
- 常态：
box-shadow: 0 2px 8px -2px rgba(0,0,0,0.08) - 悬停态：
box-shadow: 0 4px 16px -3px rgba(0,0,0,0.14) - 深色背景时，把
rgba(0,0,0,0.08)换成rgba(255,255,255,0.06)，否则看不见 - 绝对不要用
box-shadow: 0 0 12px #000—— 没方向，没浮起感
hover 浮动动画卡顿或跳动怎么办？
用
top/margin-top做位移会触发重排，尤其表格这种重渲染元素，卡顿肉眼可见。正确做法只用transform，且必须和box-shadow一起过渡。关键细节：
- 悬停时加
transform: translateY(-2px)，数值要和 v-offset 变化方向一致（比如阴影从 2px → 4px，就上移 2px） -
transition必须写在默认状态，只写需要动的属性：transition: box-shadow 0.25s ease-out, transform 0.25s ease-out - 别给外层
<div> 设 <code>overflow: hidden，否则上移时顶部被裁掉 - 表格自身宽高必须固定，别依赖内容撑开，否则 hover 时 layout shift 会抖
- 给外层
<div class="table-wrapper"> 加 <code>tabindex="0" - 把选择器从
.table-wrapper:hover table改成.table-wrapper:focus-within table - 这样键盘 Tab、手指点击、甚至屏幕阅读器都能触发，无需 JS
- 注意：若表格内有可聚焦元素（如
<input>），:focus-within会持续生效，需测试交互边界
移动端点击没反应？focus-within 是更稳的 fallback
iOS Safari 对
:hover支持极弱，触摸后不会保留悬停态，导致阴影一闪即逝。纯 CSS 下，:focus-within是目前最可靠替代方案。操作很简单：
最容易被忽略的是阴影颜色——别用通用黑灰，优先取品牌色的暗化变体（比如
#3498db的 12% 透明度叠加），否则夜间模式或深色背景里会突兀跳出来。 - 常态：
