应使用多层 linear-gradient 分工控制玻璃质感：最底层为带 noise 的浅灰渐变模拟散射，中层为极低透明度纯白渐变制造高光，顶层为透明到 rgba(255,255,255,0.03) 的垂直渐变模拟环境光衰减，且必须按透明度由高到低顺序书写，alpha 值严格控制在 0.005–0.08 区间。
linear-gradient 里怎么写透明度才不发灰？
直接写 rgba(255,255,255,0.1) 很容易让背景发灰、失真，尤其在深色底上。真正起作用的是「叠加层级」：用多层 linear-gradient 分别控制模糊感、透光感和噪点基底，而不是靠单层半透色块硬盖。
关键不是调 alpha 值，而是让每一层承担明确职责：
- 最底层：带轻微
noise的浅灰/白渐变（模拟玻璃基材散射） - 中层：极低透明度的纯白
linear-gradient（方向为to bottom right，制造高光过渡） - 顶层：
transparent到rgba(255,255,255,0.03)的垂直渐变（模拟顶部环境光衰减）
background-image 多层 gradient 怎么写才不覆盖？
CSS 中多层 background-image 是从前往后绘制的，顺序反了就全白或全黑。必须把「最透明、最轻量」的层写在最前面，「最实、最基础」的层写在最后。
错误写法：background-image: linear-gradient(to top, rgba(255,255,255,0.08), transparent), linear-gradient(45deg, #fff2, #fff1); —— 第一层太强，后面全被压住。
立即学习“前端免费学习笔记（深入）”；
正确结构示例：
background-image: linear-gradient(to top, transparent, rgba(255,255,255,0.03)), linear-gradient(45deg, rgba(255,255,255,0.02), transparent 50%, rgba(255,255,255,0.01)), linear-gradient(rgba(255,255,255,0.015), rgba(255,255,255,0.005));
注意每层都用逗号分隔，且末尾不加逗号；所有颜色 alpha 值统一控制在 0.005–0.08 区间，超出就失去玻璃感。
为什么加 backdrop-filter: blur() 后边缘发虚或闪烁？
backdrop-filter: blur(10px) 本身不负责“透明”，它只是对「背后内容」做模糊。如果容器没有设置 background-color: transparent 或显式透明背景层，浏览器会默认用画布色填充，导致边缘生硬或滚动时闪烁。
必须配齐三要素：
-
background-color: transparent（禁用默认填充） - 上面说的多层
linear-gradient（提供玻璃质感基底） -
backdrop-filter: blur(8px)（值建议 6–12px，太大易糊，太小无感）
另外，iOS Safari 对 backdrop-filter 支持不稳定，需加 -webkit-backdrop-filter 前缀，且不能和 transform: scale() 同时触发，否则 blur 失效。
移动端适配时 gradient 看起来太刺眼怎么办？
手机屏幕亮度高、PPI 密度大，同样 alpha 值的渐变在移动端会显得更“亮”、更假。不能简单降低透明度——那会让玻璃感消失。
更有效的做法是动态微调：
- 用
@media (prefers-reduced-motion: reduce)关闭 blur（性能敏感） - 对
height < 600px的屏幕，把顶层渐变的to top改成to bottom，避免顶部过曝 - 加一层
background-blend-mode: overlay混合模式（仅当有图片底图时启用）
真正难的不是写出来，是调出那种「像窗边一杯水汽未散的玻璃杯」的微妙透光感——差 0.005 的 alpha，差 2° 的角度，整体会从「通透」变成「塑料」。
