drop-shadow() 不适合直接应用于 ，因其按最终像素轮廓投阴影，导致表格稀疏结构（如单元格间隙、collapse边框）产生漏光、毛边；应改用 box-shadow 配合容器包裹或结构优化。
直接给 常见错误现象： 给 推荐写法： 示例结构： 再好的 shadow 参数，遇上这几个设置也会失效： 复杂点在于：表格发光从来不是单一样式问题，而是盒模型、渲染层、语义结构三者共同作用的结果。最容易被忽略的是——你看到的“发光断开”，往往不是 shadow 写错了，而是表格内部边框塌陷或单元格未撑满造成的视觉缝隙。<table> 加 <code>filter: drop-shadow() 是错的——它会把表格矩形盒模型外的所有空白都发光，包括单元格间隙和 collapse 后的“消失边框”，视觉上糊成一团。真正可控的发光效果，必须用 box-shadow + 容器包裹或结构微调。
为什么
drop-shadow() 不适合直接套 <table><p>表格是天然稀疏结构：单元格之间有空隙、<code>border-collapse: collapse 会让部分边框“消失”、<thead>/<code><tbody> 可能有默认 margin。而 <code>drop-shadow() 是按元素渲染后的**最终像素轮廓**投阴影——对表格来说，这个轮廓就是一堆带空隙的矩形块拼起来的“锯齿状”外沿，发光会沿着这些缝隙向外扩散，看起来像漏光、毛边、甚至四角突兀发亮。
– 表格加了 filter: drop-shadow(0 0 12px #00eeff)，但发光在行与行之间断开
– 圆角 border-radius 失效，阴影仍是直角
– 某些浏览器（如旧版 Safari）里整张表发光区域闪烁或不渲染
drop-shadow() 无法绕过 border-collapse 带来的渲染不确定性
box-shadow 是更稳的选择，但要注意这三点<table> 直接加 <code>box-shadow 可行，但默认效果常不如预期——尤其当表格没背景色、父容器 overflow 被裁、或用了 border-collapse: collapse 时，阴影可能被压扁、偏移、或边缘生硬。
background-color（哪怕只是 #fff），否则阴影在透明背景下不可见border-radius: 8px 时，一定要加 overflow: hidden，否则圆角处阴影会溢出display: inline-block 容器里，注意该容器是否设了 vertical-align，否则阴影底部可能被截table {
width: 100%;
border-collapse: collapse;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
想让发光更“活”，用容器包裹比硬改
<table> 更可靠
<p>把 <code><table> 包进一层 <code><div class="table-glow">，所有发光逻辑交给这个 wrapper 控制——这是最易调试、兼容性最好、且支持 hover 动画的方案。
<ul>
<li>wrapper 设 <code>display: inline-block 或 block，确保有明确盒模型
box-shadow，而不是 table 本身box-shadow，加 transition: box-shadow 0.2s ease
<div class="table-glow">
<table>...</table>
</div>
.table-glow {
display: inline-block;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.2s ease;
}
.table-glow:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
别忽略这些细节，它们决定发光是否“干净”
overflow: hidden，且没预留足够 padding —— 发光直接被裁掉position: relative 或 transform，导致 stacking context 变化，阴影层级错乱blur 值低于 4px 几乎不可见，建议起步用 6pxrgba(255,255,255,0.6)）容易刺眼，换成 rgba(255,230,150,0.5) 更柔和
