直接给table加box-shadow失效的根本原因是display: table盒模型无扩展空间、border-collapse: collapse导致外轮廓塌陷、祖先overflow: hidden裁剪阴影；最稳妥方案是用div包裹并设box-shadow与overflow: hidden。
直接给 table 加 box-shadow 并同时设 border: none，几乎必然失败——阴影被裁、边框线残留、圆角漏白，三者常同时出现。根本原因不是写法错，而是 table 的盒模型和渲染机制不配合常规阴影逻辑。
为什么 table 直接加 box-shadow + border:none 会失效
浏览器对 table 元素的 display: table 渲染有特殊处理：它的盒边界紧贴内容，没有默认 padding 或 margin 扩展空间；border-collapse: collapse（多数表格默认或显式设置）会让外轮廓“塌陷”，box-shadow 失去清晰锚点；而父级若存在 overflow: hidden（比如 CMS 模板、UI 框架容器），阴影直接被剪掉。
更隐蔽的问题是：即使你写了 border: none，th 和 td 仍自带 UA 样式边框行为，border-collapse: separate 下还会因 border-spacing 留下缝隙，视觉上就是“有线”。
-
table { border: none }只清除了 table 自身边框，不影响内部单元格 - 没设
border-collapse: collapse，th/td的border: none很可能不生效 -
box-shadow在table上无法响应border-radius，必须靠外层容器裁切
最稳方案：div 包裹 + 分离样式职责
把“阴影”和“无边框”拆开：阴影交给语义中立的 div，无边框逻辑专注在 table 及其单元格上。这是唯一能兼顾兼容性、可维护性和视觉准确性的做法。
- 外层
div.table-wrapper负责box-shadow、border-radius、overflow: hidden -
table保持border-collapse: collapse，并显式设border: none -
th和td必须各自设border: none，不能遗漏 - 为防 sub-pixel 抖动（尤其 iOS Safari），可加
transform: translateZ(0)到table
示例结构：
.table-wrapper {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.table-wrapper table {
width: 100%;
border-collapse: collapse;
border: none;
transform: translateZ(0);
}
.table-wrapper th,
.table-wrapper td {
border: none;
}
只想要底部阴影？用负 spread-radius 收窄
纯 CSS 没有 bottom-shadow，但可以用 box-shadow 参数组合模拟“钉在下方”的效果，避免左右晕开盖住表格边缘。
- 写法：
box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1) -
0：水平不偏移 -
4px：向下偏移，形成底部落差 -
6px：适度模糊，不生硬 -
-2px：负扩散值，向内收缩阴影宽度，防止盖住表格左右边
别用 inset ——那是内阴影，方向完全相反；也别依赖 filter: drop-shadow()，它会把每个 td 的透明区域都投影一遍，叠加后发虚，且不响应 border-radius 裁剪。
容易被忽略的细节
真正让这个方案落地不翻车的，往往不是主逻辑，而是几个极简但关键的控制点：
-
.table-wrapper必须设overflow: hidden，否则border-radius+box-shadow在圆角处一定漏光 - 如果表格内容宽度不固定，
.table-wrapper建议用width: fit-content或显式宽度，避免阴影横向拉伸失真 - 不要给
table设margin来“腾阴影空间”——那只是视觉错觉，阴影依然可能被祖先容器裁掉 - 第三方框架（如 Bootstrap）可能全局重置
table { border-collapse: separate !important }，务必用 DevTools 检查 computed 样式确认最终值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
