drop-shadow()比box-shadow更适合单元格发光，因其基于alpha通道精准贴合不规则轮廓，避免溢出漏光；但需规避overflow:hidden裁切、慎用will-change优化动画，并依赖rgba颜色与合理模糊值控制光效。
filter: drop-shadow() 为什么比 box-shadow 更适合单元格发光
因为 box-shadow 是按矩形边界投射阴影，而表格单元格（尤其是带圆角、合并单元格或含透明内容时）的真实轮廓常不规则——drop-shadow() 会读取元素 Alpha 通道，精准沿实际像素边缘发光，避免“光晕溢出”或“角落漏光”。
- 仅对支持
filter的现代浏览器生效（Chrome/Firefox/Safari/Edge ≥2018，IE 不支持） - 不能像
box-shadow那样用多层叠加控制光核与光晕，但单层就能更自然地贴合单元格形状 - 性能略优于多层
box-shadow，尤其在:hover动画中不易卡顿 - 必须作用于块级元素：如果
<td> 内是纯文本，需包裹一层 <code><div> 并设 <code>display: block给
加发光必须绕开的 overflow:hidden 陷阱 表格父容器（如
<table> 或 <code><tbody>）若设了 <code>overflow: hidden，哪怕只是为清除浮动或兼容旧布局，drop-shadow()的发光像素会被直接裁切——看起来像“断光”或完全失效。- 排查方式：临时加
outline: 1px solid red到<td>，看 outline 是否完整显示；若 outline 被截断，说明父级有裁切 <li>安全解法：移除 <code>overflow: hidden，改用display: table或flex布局替代老式清除浮动逻辑 - 妥协方案：若无法改父级，可在
<td> 上加 <code>position: relative; z-index: 1，并确保其祖先无transform或will-change（这两者会创建新层叠上下文，加剧裁切）drop-shadow() 参数怎么写才不“糊成一团”
drop-shadow()只接受三个参数：水平偏移、垂直偏移、模糊半径 + 颜色，且**不支持扩展半径和 inset**。想模拟“内发光”或“紧贴边框的描边感”，必须靠颜色透明度和模糊值精细配合。- 基础写法：
filter: drop-shadow(0 0 8px rgba(0, 150, 255, 0.6))—— 偏移全为 0 才是发光，非投影 - 防糊关键：模糊半径别超过 12px；小字号单元格（如 12px）建议 ≤6px，否则字形被光晕吞没
- 深色背景用高饱和浅色（如
rgba(100, 200, 255, 0.7)），浅色背景用低饱和暗色（如rgba(50, 50, 50, 0.2)） - 禁用
white或black：它们无 alpha，光晕会硬边或过曝；必须用rgba()或hsla()
和 transition 搭配时容易忽略的 will-change 提示
直接对
filter做transition（比如 hover 时开关发光），在 Safari 和部分 Android WebView 中可能闪烁或延迟——这不是 bug，而是渲染引擎没提前分配合成层。- 必须加：
will-change: filter到目标<td> 或其包裹 <code><div> <li>不要全局加：<code>will-change: transform或will-change: auto无效，且滥用会增加内存开销 - 移动端慎用动画：iOS Safari 对频繁
filter变化敏感，建议用@media (prefers-reduced-motion: reduce)关闭动画 - 替代轻量方案：用
opacity过渡代替filter开关，视觉差异小但更稳
真正让单元格发光“活起来”的，从来不是堆参数，而是理解
drop-shadow()依赖 Alpha 通道的本质——它只照亮你真正画出的部分。背景色、字体抗锯齿、父容器裁切，任何一个环节没对齐，光就散了。 - 基础写法：
- 排查方式：临时加
