table 直接加 box-shadow 无效，主因是 border-collapse: collapse、特殊盒模型及浏览器兼容性问题；推荐用 wrapper 容器添加阴影，或在复杂背景下使用 filter: drop-shadow()。
直接给 table 元素加 box-shadow 通常无效——因为表格默认是 display: table，且边框塌陷（border-collapse: collapse）会干扰阴影渲染。真正起效的方式是包裹容器或改用 filter。
为什么 table 直接加 box-shadow 没反应？
表格元素本身不响应 box-shadow 的常见原因有三个：border-collapse: collapse 把单元格边框“吸”进内部；table 的盒模型行为特殊，阴影常被子元素遮盖；部分浏览器对 table 的 box-shadow 渲染支持不稳定。
- 检查是否用了
border-collapse: collapse——这是表格默认行为，但它会让box-shadow失效或只在最外层极窄区域显示 - 确认父容器没设置
overflow: hidden，否则阴影会被裁掉 - 不要对
th或td单独加box-shadow，它们不是块级容器，发光效果会碎裂、错位
推荐做法：用 wrapper 容器 + box-shadow
最稳定、兼容性最好的方式是把 table 包一层 div，然后给这个容器加发光样式。这样完全绕过表格自身的渲染限制。
- HTML 结构保持简洁：
<div class="table-glow"> <table>...</table> </div>
- CSS 示例：
.table-glow { display: inline-block; /* 防止撑满整行 */ border-radius: 8px; box-shadow: 0 0 16px rgba(0, 120, 255, 0.6); overflow: hidden; /* 避免圆角处内容溢出 */ } - 如果表格本身有
border-collapse: collapse，保留它没问题——wrapper 承担发光职责，不影响数据展示逻辑
filter: drop-shadow() 替代方案（适合复杂背景）
当表格放在深色、渐变或图片背景上，box-shadow 可能因半透明叠加显得发灰；此时 filter: drop-shadow() 更可靠，它基于 Alpha 通道投射，边缘更贴合实际轮廓。
立即学习“前端免费学习笔记（深入）”；
- 直接作用于
table元素即可：table { filter: drop-shadow(0 0 12px rgba(100, 200, 255, 0.7)); } - 注意：
drop-shadow()不支持扩展半径（第四个参数），也不响应border-radius圆角——它只跟着内容透明区域走 - 若表格有
background-color且无透明区域，效果和box-shadow接近；但若有th或td设置了background: transparent，drop-shadow()会只在有内容的像素边缘发光，更精准
圆角 + 发光组合时容易漏掉的关键点
给表格加圆角发光，看似只是加 border-radius 和 box-shadow，但实际有两处极易出错：
-
border-radius必须加在 wrapper 上，而不是table本身——table对border-radius的支持极差，尤其在 Firefox 和 Safari 中常被忽略 - 如果表格设置了
border: 1px solid #eee，记得同时给 wrapper 加overflow: hidden，否则圆角会被实线边框“顶破”，出现尖角露出来 - 发光模糊值（如
16px）在高 DPI 屏幕下可能显得太弱，可配合clamp(8px, 2vw, 24px)动态适配，避免小屏过糊、大屏过淡
真正难的不是写几行 CSS，而是判断该用 wrapper 还是 filter——前者稳，后者真；多数项目选 wrapper 就够了，只有当表格嵌在复杂视觉层中、且必须精确跟随内容轮廓时，才值得切到 drop-shadow()。
