直接给<table>加box-shadow可行但易失效，主因是border-collapse:collapse使阴影贴边难察觉，且缺overflow:hidden和border-radius导致裁剪异常；推荐用div包裹table并设box-shadow、border-radius及overflow:hidden，配合padding:1px防截断。
直接给 <table> 元素加 box-shadow 是可行的，但效果是否正常，取决于你有没有处理好 border-collapse 和圆角裁剪问题——很多人加了阴影却看不见，根源就在这两个地方。
为什么 table 直接加 box-shadow 有时没反应？
核心原因是：当 table 设置了 border-collapse: collapse（这是表格默认或常用写法），它的边框会“内收”，而 box-shadow 是作用在元素盒模型外缘的；如果没设 overflow: hidden 或 border-radius 配合，阴影可能被父容器裁掉，或视觉上被合并边框“吃掉”。
-
border-collapse: collapse下，box-shadow仍生效，但只贴着外轮廓，容易被误认为“没影子” - 若用了
border-collapse: separate，单元格间有间隙，阴影会更明显，但表格结构变松散 - 没设
overflow: hidden时，border-radius圆角会失效，导致阴影溢出、边缘生硬
推荐做法：用 div 包裹 table 再加阴影
比直接操作 <table> 更可靠。把阴影逻辑交给语义中立的容器，避免和表格渲染机制耦合。
- 给外层
<div class="table-card">加box-shadow和border-radius -
<table>内部保持border-collapse: collapse，不影响数据结构 - 必须加
overflow: hidden到容器上，否则圆角+阴影会漏出 - 可配合
padding在容器内留白，让阴影有扩散空间
示例：
立即学习“前端免费学习笔记（深入）”；
<div class="table-card">
<table>...</table>
</div>
<p>.table-card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 1px; /<em> 防止阴影被父级裁切，极小值即可 </em>/
}别用 filter: drop-shadow() 替代 box-shadow
filter: drop-shadow() 看起来更“智能”，能绕过盒模型限制，但它对性能更敏感，且不支持 inset、不响应 border-radius 裁剪——它按元素形状描边投影，表格内部空隙也会被算进阴影范围，容易产生意外毛边。
-
drop-shadow(5px 5px 10px #000)会把每个<td>的透明区域也投一次影，叠加后发虚 - 在滚动容器里使用时，
filter可能触发额外重绘，低端设备卡顿更明显 - 无法像
box-shadow那样用逗号分隔多个阴影层，灵活性低
真正要控制阴影质感，还是老实用 box-shadow + 容器封装 + overflow: hidden。最容易被忽略的，其实是那个看似多余的 padding: 1px ——它不是装饰，是防止阴影被父级截断的最后一道保险。
