直接给<table>加box-shadow易失效，主因是border-collapse: collapse导致视觉边界模糊、阴影发虚，且overflow: hidden须加在包裹<div>而非<table>上；推荐用.table-wrapper容器承载阴影与圆角，并设border-collapse: separate配合border-spacing: 0确保轮廓清晰。
直接给 <table> 元素加 box-shadow 是最常用也最容易出问题的方式——不是没效果，而是效果“发虚”“不贴边”“圆角被裁”或“阴影被边框吞掉”。关键不在会不会写属性，而在 DOM 结构和 CSS 组合是否合理。
为什么直接给 <table> 加 box-shadow 常常失效
根本原因是 border-collapse: collapse 和 box-shadow 的渲染冲突。当表格启用合并边框时，<table> 的视觉边界变得模糊，阴影会沿“理论外框”而非“视觉外框”投射，导致边缘发虚、圆角不生效。
-
border-collapse: collapse下，box-shadow仍按原始盒模型计算，但实际像素边界已由单元格边框拼合而成 -
overflow: hidden必须加在包裹<table>的容器（如<div>）上，而不是<table>自身——否则圆角+阴影会被裁切 -
border-radius对<table>本身生效有限，尤其在collapse模式下，角落常留白或锯齿
推荐做法：用 <div> 包裹再加阴影
这是稳定、可控、适配性强的方案。把阴影逻辑交给语义中立的容器，表格只负责数据结构。
- HTML 结构必须是：
<div class="table-wrapper"><table>...</table></div> - CSS 中
box-shadow和border-radius都作用于.table-wrapper，不是<table> -
<table>内部设border-collapse: separate（哪怕你不想要间距），配合border-spacing: 0，避免干扰外层圆角轮廓 - 如果表格宽度不固定，
.table-wrapper建议加width: fit-content或明确宽度，防止阴影被拉宽变形
示例：
立即学习“前端免费学习笔记（深入）”；
.table-wrapper {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
width: fit-content;
margin: 0 auto;
}
.table-wrapper table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
想让阴影“从表格本体发出”？试试 outline + transform 伪方案
极少数场景（比如不能改 HTML 结构、必须单层 DOM），可用 outline 模拟外发光式阴影，成本低但非标准，仅作视觉补救。
-
outline不占布局空间，不会影响表格尺寸或滚动 - 搭配
transform: translateZ(0)触发硬件加速，减少闪烁 - 只能模拟单色、无模糊的“光晕”，无法替代真实
box-shadow - 慎用于高对比背景，因
outline无 alpha 通道，不能设透明度
简写示例：
table {
outline: 2px solid rgba(0, 0, 0, 0.1);
transform: translateZ(0);
}
hover 动态阴影与性能注意点
加交互没问题，但要注意两个容易被忽略的实际限制：
-
box-shadow变化会触发重绘（repaint），频繁 hover 时低端设备可能卡顿；建议用transition: box-shadow 0.2s ease控制节奏，别用all - 多重阴影（如三层叠加）虽视觉丰富，但每个 shadow 都是独立绘制层，移动端需实测帧率；简单场景优先用单层
blur+opacity调整 - IE11 及更老浏览器不支持
box-shadow，若需兼容，得降级为filter: drop-shadow()（注意它不支持inset，且性能略差）
真正麻烦的从来不是写那行 box-shadow，而是你没意识到 border-collapse 和 overflow 的绑定关系，以及阴影该挂在哪一层 DOM 上。
