backdrop-filter 在 table 元素上无效，根本原因是 table 及其子元素（如 tr）默认不创建堆叠上下文、背景透明且背后无实际可模糊内容；须用 div 包裹 table 并设置半透背景、backdrop-filter、-webkit 前缀及 will-change: transform 触发层叠上下文，同时提供 @supports 降级方案。
backdrop-filter 在 table 元素上为什么没效果？
直接给 <table> 或 <code><tr> 加 <code>backdrop-filter: blur(8px) 通常看不到磨砂效果，根本原因是：这些元素默认不是「堆叠上下文边界」，且背景是透明的，背后没有可模糊的内容层。浏览器需要一个有实际背景色（哪怕半透）+ 堆叠上下文 + 后面有内容的容器，backdrop-filter 才能生效。
常见错误现象：backdrop-filter 设置了但完全没变化，开发者工具里样式显示正常，却像没写一样。
- 确保目标元素有非 transparent 的
background-color（哪怕rgba(255,255,255,0.1)） - 必须触发堆叠上下文：加
position: relative、isolation: isolate或will-change: transform（推荐后者，开销小） <table> 本身不能作为 backdrop 容器——它不渲染背景区域；应包裹一层 <code><div class="glass-table"> <h3>正确封装方式：用 div 包裹 table 并设 backdrop-filter</h3> <p>把 <code><table> 放进一个带模糊样式的容器里，才是可靠做法。这个容器要覆盖整个表格区域，并与页面其他内容形成层级关系。<pre class="brush:php;toolbar:false;"><div class="glass-wrapper"> <table><tr> <td>A</td> <td>B</td> </tr></table> </div></pre> <p>对应 CSS：</p> <pre class="brush:php;toolbar:false;">.glass-wrapper { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Safari 必须加前缀 */ border-radius: 8px; overflow: hidden; will-change: transform; /* 触发堆叠上下文，避免 Safari 渲染异常 */ }</pre> <p>注意：<code>overflow: hidden防止模糊溢出；border-radius和模糊搭配才有玻璃感；Safari 下缺-webkit-backdrop-filter就完全失效。hover 状态下只模糊 tbody 行？别这么做
试图只对
<tbody> 或 <code><tr> 单独加 <code>backdrop-filter是无效的。它们没有独立背景层，也无法“透过自己模糊身后内容”——因为身后就是<thead> 或父级 <code><table>，不是页面背景。<ul> <li>如果想实现“悬停某行时该行变磨砂”，实际可行方案是：整张表用固定玻璃容器，再用 <code>::before伪元素在 hover 行上方叠加一层半透 + blur 的遮罩层- 但要注意：伪元素无法继承父级
backdrop-filter，必须让它自身成为 backdrop 容器（即设background: rgba(...)+backdrop-filter），且需保证其 z-index 高于行内容 - 性能敏感：频繁 hover 触发 blur 计算可能卡顿，建议 blur 值 ≤ 6px，或加
transform: translateZ(0)强制 GPU 加速
兼容性与降级处理不能省
Firefox 默认禁用 backdrop-filter（需用户手动开启 layout.css.backdrop-filter.enabled），iOS 15.4+ Safari 支持，Android Chrome 97+ 支持。生产环境必须提供视觉降级。
- 用
@supports (backdrop-filter: blur(1px))包裹玻璃样式，内部写完整效果；外面写纯半透 fallback - 不要只依赖
rgba(255,255,255,0.1)作为降级——它在深色背景下会发灰，建议配合background-blend-mode: overlay或加 subtle 纹理图 - 移动端慎用：部分低端 Android 设备开启 blur 后滚动掉帧，可检测
window.matchMedia('(prefers-reduced-motion: reduce)').matches关闭效果
最易被忽略的一点：blur 值超过 12px 在某些 Windows + Chrome 组合下会出现边缘锯齿或渲染撕裂，实测 8px 是兼顾质感与稳定性的临界值。
