需要给 UI 加毛玻璃/液态玻璃效果时：用…

在照片或渐变等复杂背景上制作磨砂半透明面板（卡片、导航栏、模态框、Hero），并保证动效、性能与无障碍降级。

适用场景

解决思路

1. 四要素齐备才算玻璃：Frost（backdrop-filter: blur() 加 saturate() 保持背景色鲜艳）、Translucency（alpha 约 0.08–0.18 的 background，不能全不透明也不能全透明）、Edge of glass（比填充更亮的细边框，最好左上亮到右下暗）、Depth（分层 box-shadow：环境投影 + inset 顶部高光 + inset 底部阴影）。
2. 基础写法：background: rgba(255,255,255,0.12); backdrop-filter: blur(16px) saturate(160%); 同时写 -webkit-backdrop-filter（Safari 必需）；border-radius: 20px; border: 1px solid rgba(255,255,255,0.25); box-shadow 用 0 8px 32px rgba(0,0,0,0.25) 做悬浮、inset 0 1px 0 rgba(255,255,255,0.35) 做顶部高光、inset 0 -1px 0 rgba(0,0,0,0.12) 做底部阴影。
3. 按层级调磨砂强度：轻量 UI 控件用 blur(8–12px)、alpha 0.08–0.14；重模态/登录面板用 blur(24–40px)、alpha 0.10–0.18；深色玻璃填充用 rgba(0,0,0,0.3) 并减弱顶部高光。
4. 确保 backdrop-filter 背后有内容可模糊：它只模糊元素后面的内容，纯色背景上无可见效果，必须叠在图片、渐变或视频等复杂背景上。
5. 用 ::before 画带受光角的 1px 遮罩环替代死板边框；用 ::after 叠加 opacity ≤ 0.06 的 feTurbulence 噪点，消除重模糊下的渐变条带（banding）。
6. 动效只动玻璃质感而非几何：transition 覆盖 backdrop-filter、background、box-shadow、transform（如 cubic-bezier(.16,1,.3,1)）；hover 时加深模糊（blur(24px) saturate(180%)）、提高背景 alpha（0.18）、translateY(-4px) 上浮并加强阴影。
7. 入场效果用 @starting-style { backdrop-filter: blur(0); opacity: 0; transform: translateY(16px) } 配合 [data-enter] 过渡，让磨砂从清晰逐渐显现。
8. 镜面扫光：用倾斜的白色渐变在表面扫过，可在 hover 时触发或作为缓慢的环境循环。
9. 性能注意：动画 blur 半径最昂贵（每帧重新模糊背景），若 hover 卡顿就改为动画 transform/box-shadow/background，并保持 blur 变化量小或直接跳变。
10. 液态玻璃折射：用动画 feTurbulence 驱动 feDisplacementMap，通过 filter 应用（扭曲元素自身像素），叠在 backdrop-filter 磨砂之上；scale 控制折射强度（8–14 微妙、20–30 明显、>40 熔融），baseFrequency 越低波纹越大越慢，animate 的 dur 保持 12–20s 让表面缓慢呼吸。
11. 性能控制：限制玻璃元素数量（一屏十几个会拖垮滚动帧率）；把重玻璃提升为独立图层（transform: translateZ(0) 或 will-change: transform），动画后移除 will-change；不要嵌套叠加 backdrop-filter（嵌套模糊成本呈平方级）；大半径（>40px）覆盖大面积最糟，需限制半径与面板尺寸；液态折射滤镜很重，只用于一个 Hero 元素而非网格。
12. 无障碍降级：@media (prefers-reduced-transparency: reduce) 下改为不透明背景（如 #1a1a2e）并去掉 backdrop-filter 与 ::after 噪点；@media (prefers-reduced-motion: reduce) 下取消 transition 并去掉液态折射 filter；@supports not (backdrop-filter: blur(1px)) 时用 rgba(30,30,50,.85) 等足够不透明的回退。
13. 对比度保障：半透明面板叠在照片上可能使文字低于 WCAG，需在文字下加半透明遮罩或变暗渐变，可选 text-shadow: 0 1px 2px rgba(0,0,0,.4)，并针对背景最亮区域验证正文 ≥ 4.5:1、大字 ≥ 3:1。
14. 交付物为单个可直接在浏览器打开的 HTML 文件：包含复杂背景、玻璃标记、CSS（磨砂 + 边缘高光 + 噪点 + 阴影）以及内联 SVG feDisplacementMap 滤镜，无需构建步骤；面板必须叠在真实背景上，否则演示失真。
15. 加入 seek 冻结工具以便定格检查：?state=hover 强制 hover 外观（CSS 依据 :root[data-state="hover"]），?t=N 冻结 CSS 动画与 SVG 折射到第 N 秒——脚本读取 URLSearchParams，设置 document.documentElement.dataset.state，对 document.getAnimations() 逐个设 currentTime = N*1000 并 pause()，再调用 svg.pauseAnimations() 与 svg.setCurrentTime(N)，最后置 window.__ready = true。
16. 验证循环：分别打开 ?state=rest、?state=hover 与冻结帧 ?t=2 截图，确认玻璃读起来像玻璃（模糊与边缘高光可见、无条带、文字对比度成立），并排查伪影（背景纯色导致像平盒子、Safari 缺 -webkit- 前缀、折射过强呈熔融、动画 blur 导致卡顿）；可用 npx playwright screenshot --wait-for-timeout=500 "file://$PWD/glass.html?state=hover" hover.png 与 "...?t=2" loop.png。
17. 无头验证降级：模拟 prefers-reduced-transparency（如 Playwright 相关标志，或用 ?reduced=1 查询切换镜像该媒体查询的 class）并截图确认面板为不透明且可读。
18. 完成前自查：独立打开无控制台报错且玻璃叠在真实复杂背景上；模糊与亮边高光均可见、分层阴影悬浮、无条带（噪点存在）；文字在背景最亮处对比度 ≥ 4.5:1；?state= / ?t=N 能定格确定性画面；reduced-transparency 下为不透明面板、reduced-motion 下折射/扫光停止、无 backdrop-filter 时有 @supports 回退；性能合理（玻璃数量受限、不在卡顿路径上动画 blur、液态折射仅一个元素）。

适用边界 · 注意事项

• 背景是纯色或平坦渐变时——backdrop-filter 无可模糊内容，玻璃会退化成普通半透明盒子。
• 需要在一屏内大量堆叠玻璃元素或嵌套 backdrop-filter 时——重复模糊成本呈平方级增长，会严重拖垮滚动帧率。
• 目标环境不支持 backdrop-filter 且无法接受 @supports 不透明回退时——效果将完全失效。