应使用 box-shadow 给 table 加发光，需包裹 div 并设 display: inline-block/block，避免 border-collapse: collapse 和 overflow: hidden 截断阴影，推荐 rgba(255,255,255,0.7) 半透明白色光。
直接用 box-shadow 给 <table> 加发光，别碰 outline 或 text-shadow
表格本身是内联块级混合行为，outline 不支持圆角扩散，text-shadow 只作用于文字而非整个边框。真正可控、兼容性好（Chrome 20+/Firefox 16+/Safari 6.1+）的方式是给 <table> 元素加 box-shadow，并确保它脱离文档流干扰——最稳妥的做法是包裹一层 <div> 并设 display: inline-block 或 display: block。
常见错误现象：box-shadow 没效果？大概率是 <table> 默认 border-collapse: collapse 导致阴影被子元素（如 <td>）遮挡，或父容器 overflow: hidden 截断了阴影。
- 必须显式设置
table { display: block; }或外层div { display: inline-block; } - 避免在
table上同时用border和模糊值过大的box-shadow，否则视觉上会“糊成一团” - 发光颜色建议用半透明白色/浅蓝：
box-shadow: 0 0 12px rgba(255, 255, 255, 0.7)，比纯黑更通透
border-collapse: separate 是启用单元格独立边框发光的前提
如果想让每个 <td> 或 <th> 都带微光（比如悬停高亮），不能用 collapse 模式——它把所有边框合并为一条线，阴影无法单独作用于单个单元格。
使用场景：数据看板中需要强调某行列、或做 hover 状态反馈时，separate + :hover + box-shadow 组合最灵活。
立即学习“前端免费学习笔记（深入）”；
- 设
table { border-collapse: separate; border-spacing: 0; }，保留间隙控制权 - 给
td, th { box-shadow: 0 0 4px rgba(0, 120, 255, 0.3); transition: box-shadow 0.2s; } - 悬停时增强：
td:hover { box-shadow: 0 0 10px rgba(0, 120, 255, 0.6); } - 注意：IE 8 及以下不支持
border-collapse: separate的阴影渲染，需降级为背景色变化
滤镜（filter）慎用于整表，优先用在 tbody 或 tr 上
filter: drop-shadow() 看似更“真实”，但它会作用于整个元素的 Alpha 通道，对含透明背景或复杂嵌套的表格容易造成边缘锯齿或意外泛光；而 box-shadow 基于盒模型，更稳定。
性能影响明显：给整张大表（比如 100 行 × 10 列）加 filter: drop-shadow(0 0 8px #00aaff)，滚动时 GPU 负载陡增，尤其在 Safari 下易卡顿。
- 如真要用滤镜，只加在局部：例如
tbody tr:nth-child(odd) { filter: drop-shadow(0 0 4px rgba(0, 150, 255, 0.2)); } - 避免和
transform同时触发合成层爆炸（比如tr:hover { transform: scale(1.01); filter: ...; }） - 移动端务必测试：iOS 15 之前
filter在<table>上有渲染 bug，阴影可能偏移或消失
响应式表格下发光容易失效，关键靠 max-width + overflow-x
当表格宽度超屏、出现横向滚动时，box-shadow 会被父容器裁剪——不是代码错了，是 CSS 层叠上下文和溢出规则共同导致的。
最容易被忽略的一点：发光效果在小屏上看起来“没了”，其实只是被 overflow: hidden 吞掉了。修复不靠 JS，靠两行 CSS：
- 外层容器必须设
overflow-x: auto且width: 100%，不能设max-width在<table>自身上 -
table { width: max-content; min-width: 100%; }，确保内容撑开但不强制换行 - 发光阴影的
blur值建议 ≤ 12px，否则横向滚动时右侧阴影被截断明显
真正难的不是写对那几行 CSS，而是判断该在哪一层加效果：是整表轮廓光？某列聚焦光？还是 hover 单元格微光？不同目标对应不同的 DOM 包裹策略和属性组合，改错一层，全盘视觉就失焦。
