直接给<table>加box-shadow易失效，因其渲染边界模糊且不生成独立块级上下文；应改用外层<div>容器承载阴影，并设border-collapse: separate、width: fit-content及overflow: hidden确保视觉可控。
直接给 <table> 元素加 box-shadow 是可行的，但几乎一定会出问题——阴影断开、圆角被裁、边缘发虚，根源不在写法错，而在表格渲染机制本身。
为什么 table 直接加 box-shadow 容易失效
浏览器对 <table> 的渲染有特殊规则：border-collapse: collapse 会让边框“合并”，导致元素实际绘制边界模糊；box-shadow 只能投射在明确的盒模型边界上，而 collapsed 表格的边界是逻辑上的，不是视觉可绘制的矩形。更关键的是，<table> 默认不生成独立的块级上下文，阴影常被父容器或滚动裁剪。
- 常见现象：滚动页面时阴影突然消失、圆角处阴影被硬切、hover 时阴影跳变
- 根本原因：不是 CSS 写错了，而是把阴影加在了“不该承载阴影”的元素上
- 真正该加阴影的，是包裹
<table>的外层容器（如<div class="table-wrapper">），而非<table>本身
正确做法：用 wrapper 容器 + 分离边框 + 溢出控制
核心思路是绕过表格自身渲染缺陷，用一个干净的容器接管阴影职责，并确保视觉边界清晰可控。
- 给外层
<div>加box-shadow、border-radius和overflow: hidden - 给
<table>设border-collapse: separate，否则border-spacing不生效，且边框会干扰阴影轮廓 - 显式设置
<table>宽度（如width: 100%或width: fit-content），避免容器宽度撑开导致阴影拉伸失真 - 若表格有固定列宽，建议配合
table-layout: fixed防止内容撑破圆角区域
.table-wrapper {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
width: fit-content; /* 避免阴影横向拉长 */
margin: 0 auto;
}
<p>.table-wrapper table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}立体感强化：两层阴影模拟光源方向
单层 box-shadow 只能浮起，无法体现厚度。真实立体感依赖明暗配对——就像给卡片打一束左上光源，右下出投影、左上出高光。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
box-shadow: 1px 1px 0 rgba(255,255,255,0.9), -1px -1px 0 rgba(0,0,0,0.08) - 注意顺序：高光（浅色+正偏移）必须写在前面，否则会被深色阴影盖住
- blur 设为
0保证边缘锐利，符合“硬边立体”物理逻辑 - 深色背景上要把高光改成
rgba(255,255,255,0.7)，阴影改成rgba(0,0,0,0.15)，避免刺眼或不可见
容易被忽略的兼容性细节
看似简单的阴影，实际在不同场景下行为差异很大：
-
filter: drop-shadow()虽然能绕过盒模型限制，但它基于图像处理，会模糊文字边缘，且不支持inset，也不响应border-radius裁剪 —— 仅适合图标类简单图形，别用在表格上 - 移动端 Safari 对
spread值渲染略偏大，但本方案未使用spread，所以无影响 - 如果表格内有
<th>或<td>自带border，务必先重置：border: none，否则真实边框和阴影会打架 - 别在
:hover中从无到有添加多层box-shadow，会导致重排；建议始终保留基础层，只微调动效参数
最麻烦的从来不是怎么加阴影，而是怎么让阴影不随滚动消失、不被圆角截断、不跟边框抢戏——这些细节没调对，再漂亮的参数也只是看起来像那么回事。
