HTML表格本身支持box-shadow的扩散半径（spread-radius），但因border-collapse: collapse等默认样式干扰，常导致扩散效果不可见；真正生效需设border-collapse: separate、避免overflow:hidden，并推荐用div包裹table来可靠控制扩散。
HTML表格本身不支持 box-shadow 的扩散半径控制？
直接给 <table> 元素加 box-shadow: 0 0 10px rgba(0,0,0,0.2) 是可行的，但「扩散半径」实际由第三个参数（即 blur-radius）决定——这个值不是表格专属属性，而是 CSS 标准盒阴影规则。关键在于：表格默认有 border-collapse: collapse，会干扰阴影渲染，尤其当单元格自带边框时，阴影可能被裁剪或视觉上被掩盖。
常见错误现象：box-shadow 几乎看不见，或只在表格外侧局部显示；调整 blur-radius（比如从 5px 改到 20px）效果不明显。
- 必须确保表格父容器或自身没有
overflow: hidden，否则阴影会被裁掉 - 推荐显式设置
border-collapse: separate，并配合border-spacing留出物理间隙，让阴影有空间扩散 - 若需保留细线边框风格，可用
outline或伪元素模拟，避免和box-shadow冲突
如何让 table 的 box-shadow 扩散半径真正生效
核心是解除表格内部边框对阴影的视觉干扰，并提供足够渲染区域。下面是最小可靠配置：
<table style=" border-collapse: separate; border-spacing: 0; box-shadow: 0 2px 16px rgba(0,0,0,0.15); /* 扩散半径 = 16px，可调 */ "> <tr><td>A</td><td>B</td></tr> </table>
注意：border-spacing 设为 0 是为了防止单元格间空隙“吃掉”阴影；如果希望留白，可设为 4px，但此时需同步增大 box-shadow 的 spread-radius（第四个参数），例如 box-shadow: 0 2px 12px 4px rgba(0,0,0,0.1) —— 这里的 4px 就是扩散半径，它会让阴影整体向外延展，弥补间隙。
立即学习“前端免费学习笔记（深入）”；
- spread-radius 为正数：阴影均匀向外扩张，适合需要“浮起感”的场景
- spread-radius 为负数：阴影向内收缩，慎用，容易导致边缘变硬或消失
- Chrome/Firefox 对
table的box-shadow渲染一致，但 Safari 在border-collapse: collapse下可能完全不显示阴影
替代方案：用 wrapper div 控制阴影更稳定
绕过表格自身渲染限制最稳妥的做法，是用一层 <div> 包裹 <table>，把 box-shadow 加在 wrapper 上。这样扩散半径完全可控，且不受表格边框模型影响。
<div style="
display: inline-block;
box-shadow: 0 4px 24px -4px rgba(0,0,0,0.2);
/* spread-radius = -4px，压紧阴影底部 */
">
<table style="border-collapse: collapse;">
<tr><td>X</td><td>Y</td></tr>
</table>
</div>这里 display: inline-block 让 wrapper 紧贴表格内容，避免额外宽度；box-shadow 的第四个参数（spread-radius）设为负值，能抑制阴影向下“虚化”，更适合数据表格这种需要干净底部边缘的场景。
- wrapper 方案兼容所有浏览器，包括旧版 Edge
- 若表格响应式宽度变化，需确保 wrapper 不设固定宽，否则阴影会错位
- 不要给 wrapper 加
padding，否则扩散半径会叠加 padding 区域，造成意外留白
为什么 td/th 的 box-shadow 基本无效
给单个 <td> 加 box-shadow 几乎没用：表格单元格默认是 display: table-cell，不生成独立 stacking context，且受 border-collapse 和相邻单元格边框影响，阴影极易被覆盖或截断。即使强行设置 position: relative，也常因表格布局算法失效。
真实使用场景中，只有极少数定制化单元格（如带状态色块的指标卡）才值得单独加阴影，此时应改用 <div> 替代 <td>，并脱离表格渲染流。
- 不要尝试用
outline模拟阴影——它不支持 blur，无法体现扩散效果 - 不要依赖
filter: drop-shadow()给表格：它对table元素支持差，且 blur 值不可控 - 真正需要单元格级阴影时，优先重构为 CSS Grid 或 Flex 容器，而非硬套表格语义
表格阴影的扩散半径看似只是数值调整，实则卡在表格渲染模型和 CSS 盒模型的交界处。最容易被忽略的是：你调的不是「阴影大小」，而是「阴影有没有地方展开」。
