table直接加box-shadow大概率失效，因display:table盒模型无延展空间、border-collapse:collapse模糊外轮廓、祖先overflow:hidden裁剪阴影；应改用div包裹并设box-shadow、border-radius、overflow:hidden及border-collapse:separate。
table 直接加 box-shadow 大概率没反应——不是你写错了，是浏览器对 table 的盒模型渲染不支持直接投射阴影。
为什么 table 上的 box-shadow 经常失效
根本原因是 table 默认为 display: table，它的盒边界紧贴内容，没有“向外延展”的空间；再加上常见配置 border-collapse: collapse 会让外轮廓模糊，box-shadow 找不到清晰锚点。DevTools 里能看到样式声明存在，但 computed 值中常为空或被裁掉。
- 父容器设置了
overflow: hidden（哪怕只是某层祖先），阴影会被直接截断 -
border-radius单独加在table上无效，必须配overflow: hidden才能生效，而这个overflow又会把阴影剪掉 - 临时加
padding: 10px或background: #eee到table上，如果阴影突然出现，就坐实了是尺寸/溢出问题
最稳妥：用 div 包裹并设 box-shadow
这是兼容性最好、可控性最强的方案，绕过 table 渲染限制，同时保留语义结构。阴影真正作用在块级容器上，不受内部单元格撑开影响。
-
.table-wrapper必须设overflow: hidden（否则圆角+阴影会溢出） -
.table-wrapper设border-radius，table自身不用设 -
table必须用border-collapse: separate+border-spacing: 0，否则外轮廓不清、阴影边缘发虚 - 宽度建议用
width: fit-content或显式值（如600px），避免阴影横向拉伸失真
.table-wrapper {
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
width: fit-content;
}
.table-wrapper table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
只想加底部阴影？控制 spread-radius 是关键
纯 CSS 没有 bottom-shadow，但可以用参数组合模拟：垂直偏移为正、水平偏移为 0、用负的 spread-radius 收窄左右发散，让阴影“钉”在下方。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1) -
-2px是重点：它向内收缩阴影宽度，防止左右“晕开”盖住边框 - 别用
inset——那是内阴影，方向反了 - 多层阴影注意顺序：逗号分隔，从左到右由远及近绘制，比如
0 12px 36px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08)
行悬停阴影不能直接写在 tr 上
<tr> 不支持 box-shadow，必须落到可渲染盒模型的元素上，最常用的是 td 和 th。
- 给
td/th加position: relative，再用:hover触发box-shadow - 若表格用了
border-collapse: collapse，阴影易被裁，此时要么改用separate，要么确保包裹容器没设overflow: hidden - 阴影值建议轻量：
box-shadow: 0 1px 3px rgba(0,0,0,0.08)，避免多列叠加过重 - IE10 及以下不支持
td上的box-shadow，需降级为背景色+边框模拟
最容易被跳过的细节是 spread-radius 的正负值和 overflow: hidden 的配对位置——漏掉任何一个，阴影就可能半隐半现、边缘漏光，或者干脆消失。
