直接给<table>加box-shadow常失效，因默认border-collapse: collapse压缩外边缘使阴影锚点消失，且父容器overflow: hidden会裁剪阴影；应改用<div>包裹并设box-shadow、border-radius、overflow: hidden，同时<table>内设border-collapse: separate和border-spacing: 0。
直接给 <table> 加 box-shadow 多数情况下会失效或边缘发虚——根本原因是表格默认的 border-collapse: collapse 与阴影渲染冲突，且父容器未做裁剪控制。
为什么 table 直接加 box-shadow 常常没效果或边缘模糊
浏览器对 <table> 元素的盒模型处理较特殊：当 border-collapse: collapse（默认值）启用时，border-spacing 失效，表格边界实际由单元格边框拼合而成，导致 box-shadow 的绘制锚点不清晰；加上多数人忽略 overflow: hidden 的作用范围，阴影常被父容器意外裁掉。
- 常见错误现象：
box-shadow看不见、只在左上角有微弱灰边、圆角处阴影断裂、hover 时阴影突然跳变 - 真正生效的前提是：把阴影加在包裹
<table>的外层容器（如<div>），而非<table>自身 -
border-radius必须配合overflow: hidden使用，且该样式必须写在**外层容器**上，否则圆角+阴影会被截断 - 若表格宽度用
100%，外层容器建议设width: fit-content或固定值，避免阴影被拉宽变形
正确写法：用 div 包裹 table 并设置 shadow 容器类
核心是分离结构与样式责任：让 <div> 承担视觉装饰（阴影、圆角、裁剪），让 <table> 专注语义和布局。
- 外层
<div class="table-shadow">必须含：box-shadow、border-radius、overflow: hidden -
<table>内部需设：border-collapse: separate（关键！否则border-spacing: 0不生效） - 若需紧凑边框，用
border-spacing: 0替代collapse，它兼容阴影轮廓且更可控 - 示例最小可行代码：
<div class="table-shadow">
<table>
<tr><th>姓名</th><th>城市</th></tr>
<tr><td>张三</td><td>北京</td></tr>
</table>
</div>
<style>
.table-shadow {
width: fit-content;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.table-shadow table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
</style>
底部单边阴影怎么实现（比如只想要下阴影）
纯 CSS 没有 bottom-shadow，但可通过参数组合模拟——关键是控制垂直偏移与扩散，避免水平溢出干扰。
立即学习“前端免费学习笔记（深入）”；
- 典型写法：
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) -
0表示无水平偏移，4px垂直向下，6px模糊半径提供柔和感，-1px负扩散收窄阴影底部宽度，防止盖住下边框 - 若阴影仍太“胖”，优先调小
blur-radius（如改3px），而非加大负扩散——后者易导致阴影断裂 - 注意：外层容器必须留出足够
padding-bottom，否则overflow: hidden会裁掉阴影底部
容易被忽略的兼容性与性能细节
box-shadow 在现代浏览器中已无兼容问题（IE9+ 支持），但实际项目里真正踩坑的是隐性约束。
- 颜色务必用
rgba()指定透明度，不要依赖浏览器默认色——各引擎对未声明color的处理不一致 - 多层阴影（如
box-shadow: 0 2px 4px ..., 0 -1px 2px ...）会增加绘制开销，表格区域大时可能引发低端设备卡顿 - 深色模式下，
rgba(0,0,0,0.1)会显得过重，需配合@media (prefers-color-scheme: dark)覆盖颜色值 - 响应式场景中，
blur-radius和spread-radius建议用rem或em，避免在高 DPR 屏幕上过虚
真正麻烦的从来不是加阴影，而是让阴影在各种表格尺寸、嵌套层级、主题切换下始终稳定可见——外层容器 + separate + 显式宽度，这三点漏掉任意一个，就等于埋了个视觉雷。
