直接给table加box-shadow常失效，因border-collapse:collapse使表格外边缘塌陷，阴影作用于不可见逻辑边界；应改用div包裹并设box-shadow、border-radius和overflow:hidden，同时table设border-collapse:separate。
直接给 <table> 加 <code>box-shadow 往往没效果，或者阴影边缘发虚、圆角被裁、下边框被盖住——根本原因不是写法错，而是表格盒模型和 CSS 渲染机制的冲突。
为什么 table 元素加 box-shadow 常常失效？
关键在 border-collapse 和容器包裹方式：
-
border-collapse: collapse会让<table> 的边界“塌陷”，<code>box-shadow实际作用在不可见的逻辑边界上，导致阴影位置漂移或模糊 - 如果把
box-shadow直接写在<table> 上，又没设 <code>overflow: hidden在父级<div>，圆角 + 阴影会溢出，尤其在缩放或高 DPI 屏幕下更明显<li><code><table> 默认是 <code>display: table，不响应border-radius，必须套一层<div> 才能真正圆角+阴影联动<h3>正确做法：用 div 包裹 table 并控制 overflow</h3> <p>这是最稳定、兼容性最好、且支持圆角阴影的方案：</p> <ul><li>把 <code><table> 放进一个 <code><div class="table-shadow"> 中<li> <code>box-shadow和border-radius写在.table-shadow上，不是<table><li>必须加 <code>overflow: hidden到该<div>，否则圆角处阴影会“露馅”<li><code><table> 自身设 <code>border-collapse: separate（哪怕你不需要单元格间距），这是为了确保外边框轮廓清晰，阴影有明确落点示例 CSS：
.table-shadow { border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); overflow: hidden; width: fit-content; /* 避免 div 撑满父容器导致阴影拉宽 */ } .table-shadow table { border-collapse: separate; border-spacing: 0; }想让阴影“紧贴表格底部”？别信 offset 调整，试试 spread + 负值
单纯调大
v-offset（比如0 8px ...）会让阴影整体下移，但看起来像“飘起来”，而不是“贴着底边”。真要模拟紧贴感，靠的是spread-radius控制实边宽度：- 写成
box-shadow: 0 4px 6px -2px rgba(0,0,0,0.1)—— 负的spread-radius会收缩阴影，让底部边缘更锐利 - 如果发现下边框被阴影盖住，说明
blur-radius太大或没设background-color；给<table> 加 <code>background: #fff是必须的 - 慎用
inset：它生成的是内阴影，方向反了，对表格几乎无用 - 深色背景下，
rgba(0,0,0,0.1)几乎看不见，得改用浅灰+更高透明度，例如rgba(255,255,255,0.15) - 媒体查询里单独覆盖：
@media (prefers-color-scheme: dark) { .table-shadow { box-shadow: 0 2px 8px rgba(255,255,255,0.08); } } - 小屏设备上，
blur-radius > 8px容易糊成一片，建议 ≤ 6px，并配合略大的v-offset（如0 3px）维持可识别性
移动端或深色模式下阴影容易失效
这不是 bug，是对比度和渲染策略变化导致的视觉丢失：
最易被忽略的点：阴影不是装饰，它是视觉层级信号。一旦表格背景透明、父容器有
overflow: hidden、或用了transform未触发新层叠上下文，阴影就可能消失——检查 computed styles 里的box-shadow是否被计算为none，比反复调参数更高效。 - 写成
