直接给加box-shadow易失效，主因是border-collapse: collapse导致视觉边界模糊、阴影发虚，且overflow: hidden须加在包裹而非上；推荐用.table-wrapper容器承载阴影与圆角，并设border-collapse: separate配合border-spacing: 0确保轮廓清晰。
直接给 <table> 元素加 <code>box-shadow 是最常用也最容易出问题的方式——不是没效果，而是效果“发虚”“不贴边”“圆角被裁”或“阴影被边框吞掉”。关键不在会不会写属性，而在 DOM 结构和 CSS 组合是否合理。
为什么直接给 <table> 加 <code>box-shadow 常常失效
根本原因是 border-collapse: collapse 和 box-shadow 的渲染冲突。当表格启用合并边框时，<table> 的视觉边界变得模糊，阴影会沿“理论外框”而非“视觉外框”投射，导致边缘发虚、圆角不生效。
<ul>
<li>
<code>border-collapse: collapse 下，box-shadow 仍按原始盒模型计算，但实际像素边界已由单元格边框拼合而成
overflow: hidden 必须加在包裹 <table> 的容器（如 <code><div>）上，而不是 <code><table> 自身——否则圆角+阴影会被裁切
<li>
<code>border-radius 对 <table> 本身生效有限，尤其在 <code>collapse 模式下，角落常留白或锯齿
推荐做法：用 <div> 包裹再加阴影
<p>这是稳定、可控、适配性强的方案。把阴影逻辑交给语义中立的容器，表格只负责数据结构。</p>
<ul>
<li>HTML 结构必须是：<code><div class="table-wrapper"><table>...</table></div>
box-shadow 和 border-radius 都作用于 .table-wrapper，不是 <table><li><code><table> 内部设 <code>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 上。
