唯一可行方案是用<div>包裹<table>并给容器设置box-shadow: inset，因<table>为替换元素且border-collapse: collapse导致内阴影无法渲染，需设background: transparent、border-collapse: separate及适当宽度。
box-shadow: inset 0 0 12px rgba() 是唯一可行方案
表格本身不支持 box-shadow: inset 直接生效，因为 <table> 是替换元素，且默认 border-collapse: collapse 会干扰内阴影渲染。必须用容器包裹，并确保容器具备“内部可透光”的结构空间。
常见错误是直接给 <table> 写 box-shadow: inset 0 0 12px rgba(255,255,255,0.6) —— 它不会显示，不是语法错，而是浏览器根本不为 collapsed 表格渲染 inset 阴影。
- 必须用
<div>包裹<table>，并给该<div>加box-shadow: inset - 包裹容器需设
background: transparent或深色背景，否则白底会吞掉内光 -
<table>自身要设border-collapse: separate（哪怕不用border-spacing），否则 inset 光晕无法在单元格间隙处自然扩散 - 若表格有固定宽度，容器宽度建议用
width: fit-content或显式值，避免内发光被拉伸变形
为什么 table 不能直接加 inset 发光？
本质是渲染层限制：inset 阴影需要元素有“内部填充空间”才能向内投射光晕。而 <table> 在 border-collapse: collapse 模式下，边框被合并成一条线，没有可作用的内边距区域；即使设了 padding，也只影响内容区，不构成阴影可渲染的“内侧表面”。
你看到的“表格内发光”，实际是光晕从容器内壁向表格区域漫射——表格只是被照亮的对象，不是光源载体。
立即学习“前端免费学习笔记（深入）”；
- 验证方式：给
<table>加outline: 1px solid red，再加box-shadow: inset，你会发现 outline 亮了但表格本身没光 - Safari 和旧版 Android WebView 对
inset+table的兼容性更差，基本不渲染 - 不要尝试用
filter: drop-shadow()替代——它只对外轮廓投影，完全无法模拟“从内部透出”的效果
双层 inset 阴影让光更真实
单层 inset 0 0 12px 容易显得平面、发灰。叠加两层不同强度的内阴影，能模拟真实光学衰减：近处锐利提亮，远处柔和弥散。
推荐写法：box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.8), inset 0 0 16px rgba(255, 255, 255, 0.3)
- 第一层
6px控制边缘清晰度，0.8透明度保证亮度不被背景吃掉 - 第二层
16px负责光晕延展，0.3避免过曝，尤其在深色主题下更耐看 - 别叠加三层以上——CSS 解析开销上升，在低端设备上滚动表格时可能掉帧
- 如果表格带
border-radius，父容器要加overflow: hidden，否则 Safari 可能裁切光晕边缘
白底表格怎么避免内光失效？
白底 JPG 或带白背景的 PNG 会让 inset 光完全不可见——不是代码问题，是光被不透明像素挡死了。
解决方案只有两个，且必须二选一：
- 换图源：用 Alpha 通道完整的 PNG，确保表格区域外是透明的
- 换容器：给包裹
<div>设深色背景，例如background: #1a1a2e，再加padding: 4px留出发光余量
绝对不要给 <table> 自身设 background-color 或 background-image——那等于在光源前挂了一堵墙，内光永远出不来。
容易被忽略的是：移动端 WebView 中，若父容器启用了 will-change: transform 或 backface-visibility: hidden，也可能导致 inset 阴影渲染异常，调试时可临时移除这些属性验证。
