直接给table加box-shadow常失效，因其border-collapse: collapse导致阴影被裁剪或不贴合；需用wrapper容器包裹并设box-shadow，或改用filter: drop-shadow()、伪元素方案实现完整发光效果。
直接给 table 元素加 box-shadow 就能实现基础发光边框，但表格自带边框合并机制（border-collapse: collapse）会让阴影“断开”或不贴合，必须绕过这个限制才能让光晕完整包裹整个表格。
为什么 table 直接加 box-shadow 效果常失效
表格默认使用 border-collapse: collapse，单元格边框会合并成一条线，导致 box-shadow 只作用在 table 的外盒模型上——而这个盒子的 padding 和 border 间隙极小，甚至为 0，阴影容易被裁剪或显得稀薄；更关键的是，overflow: hidden（某些浏览器默认行为）可能直接截掉模糊半径。
- 用开发者工具检查 computed styles，确认
table的padding是否为 0 -
box-shadow的模糊值（如20px）必须大于实际外边距（margin）和容器内边距（padding），否则光晕被压扁 - 若表格父容器设置了
overflow: hidden，发光会被直接裁掉——这是最常被忽略的隐形坑
用 wrapper 容器兜住发光效果
不依赖 table 自身的盒模型，而是套一层 div 作为发光载体，彻底规避 border-collapse 干扰。
- 给
table设置border-collapse: separate或保留collapse都行，它只管内部结构 - 外层
div设display: inline-block或display: block+ 明确width，避免浮动塌陷 - 发光样式写在外层
div上：box-shadow: 0 0 16px rgba(0, 150, 255, 0.6) - 可加
border-radius: 8px让光晕带圆角，但注意：表格本身不能设border-radius（IE/旧 Safari 不支持），只能靠 wrapper 实现
示例 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<div class="table-glow">
<table>
<tr><th>姓名</th><th>分数</th></tr>
<tr><td>张三</td><td>92</td></tr>
</table>
</div>对应 CSS：
.table-glow {
display: inline-block;
border-radius: 8px;
box-shadow: 0 0 16px rgba(0, 150, 255, 0.6);
overflow: visible; /* 关键：防止父容器裁剪 */
}filter: drop-shadow() 替代 box-shadow 的适用场景
当表格含透明区域（比如 th 或 td 背景设为 rgba() 或 PNG 图片）、或需要跟随不规则轮廓发光时，filter: drop-shadow() 比 box-shadow 更准——它基于 Alpha 通道计算，不是简单盒模型投影。
- 必须作用于
table本身（不能写在 wrapper 上，否则光晕位置偏移） - 语法与
box-shadow类似：filter: drop-shadow(0 0 12px rgba(100, 200, 255, 0.7)) - 不支持
inset，也不响应border-radius（它只认元素真实像素轮廓） - 性能略低于
box-shadow，尤其在滚动区域频繁重绘时，慎用于长表格
伪元素方案：控制发光层叠与形状精度
如果需要精确控制发光宽度、内外双层光晕、或配合 hover 动画，用 ::before 伪元素比纯 CSS 属性更灵活。
- 给 wrapper
div设position: relative -
::before绝对定位，inset: -4px（或top/left/right/bottom: -4px），z-index: -1 - 用
border-radius+box-shadow或background+blur()实现光晕 - 例如：
content: ""+background: linear-gradient(45deg, #00c6ff, #0072ff)+filter: blur(12px)，可做出渐变流光边框
真正复杂的地方不在写法，而在调试：发光是否被父容器裁剪、是否随表格内容撑大而变形、在高缩放比（如 150% 系统缩放）下是否糊掉——这些都得实机测，不能只看开发工具预览。
