琉璃 液态玻璃

你听到的「一个控件一个图层」是简化说法：真正要做的是每控件 4 个子层。前两层决定「像不像玻璃」，后两层决定「贵不贵气」。

玻璃的三个参数就能决定观感：模糊半径、饱和度提升、染色浓度。Apple 的取向是「重模糊 + 高饱和 + 低染色」——让背后的颜色透上来，但形状被揉开。

/* 琉璃 · 玻璃原语（4 层） */
.glass{
  position:relative; isolation:isolate;
  background:rgba(255,255,255,.12);                     /* L1 材质染色 */
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  border-radius:28px;
  box-shadow:0 18px 48px -18px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.28);       /* L2 内辉光 */
}
/* L2 折光：只留 1px 边框的渐变描边 */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg,
    rgba(255,255,255,.72), rgba(255,255,255,.10) 34%,
    rgba(255,255,255,.10) 66%, rgba(255,255,255,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* L3 高光：顶部镜面反射带 */
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.45), rgba(255,255,255,.06) 24%, transparent 52%);
  opacity:.5; mix-blend-mode:screen;
}

所有控件都复用 .glass 的 4 层，只改圆角、染色浓度与内容排布。

L2 折光层 · 渐变描边 + 内辉光（默认方案，零成本、可全站使用）；需要真实折射时，额外复制一层背景做 SVG 位移 —— 注意 filter:url() 只作用于元素自身，不做背滤，所以要先把背景复制进玻璃里再位移，仅建议用于大面积面板。

<!-- 折射滤镜：用噪声当位移图，把玻璃后方的像素推开 -->
<svg width="0" height="0">
  <filter id="lg-refract" x="-15%" y="-15%" width="130%" height="130%">
    <feTurbulence type="fractalNoise" baseFrequency="0.012 0.02"
                  numOctaves="2" seed="9" result="noise"/>
    <feGaussianBlur in="noise" stdDeviation="1.2" result="soft"/>
    <feDisplacementMap in="SourceGraphic" in2="soft" scale="18"
                       xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>
/* 用法：在玻璃内部复制一层背景，再对它位移 —— filter 不会折射 backdrop */
.pane{ overflow:hidden; }
.pane .bend{
  position:absolute; inset:-24px;
  background: /* 与背后一致的渐变/图片 */;
  filter:url(#lg-refract);
  opacity:.5; mix-blend-mode:screen;
}

A · 悬浮控制台：全屏壁纸 + 单列玻璃栈（顶部胶囊导航、中部数据卡、底部操作条），玻璃之间留 16px 让壁纸从缝隙透出来。B · 侧栏 + 内容浮层：左侧玻璃侧栏（饱和度 −20% 更沉），右侧内容区用大玻璃面板承载。