backdrop-filter 在 table 元素上无效，根本原因是 table 及其子元素（如 tr）默认不创建堆叠上下文、背景透明且背后无实际可模糊内容；须用 div 包裹 table 并设置半透背景、backdrop-filter、-webkit 前缀及 will-change: transform 触发层叠上下文，同时提供 @supports 降级方案。
backdrop-filter 在 table 元素上为什么没效果？
直接给 <table> 或 <tr> 加 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 容器——它不渲染背景区域；应包裹一层<div class="glass-table">
正确封装方式：用 div 包裹 table 并设 backdrop-filter
把 <table> 放进一个带模糊样式的容器里，才是可靠做法。这个容器要覆盖整个表格区域，并与页面其他内容形成层级关系。
<div class="glass-wrapper">
<table>
<tr><td>A</td><td>B</td></tr>
</table>
</div>对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.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 渲染异常 */
}注意：overflow: hidden 防止模糊溢出；border-radius 和模糊搭配才有玻璃感；Safari 下缺 -webkit-backdrop-filter 就完全失效。
hover 状态下只模糊 tbody 行？别这么做
试图只对 <tbody> 或 <tr> 单独加 backdrop-filter 是无效的。它们没有独立背景层，也无法“透过自己模糊身后内容”——因为身后就是 <thead> 或父级 <table>，不是页面背景。
- 如果想实现“悬停某行时该行变磨砂”，实际可行方案是：整张表用固定玻璃容器，再用
::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 是兼顾质感与稳定性的临界值。
