液态玻璃＝半透明底＋两档模糊＋顶边亮线：侧栏30px·160%，卡片24px·150%
后面糊开、再提一点饱和度，上沿一道inset 0 1px 0的白线当受光的边。视口大小的面用重的一档，浮在内容上的小卡用轻的一档。
本站这里在用全站 · 侧栏导航
切着看同一张玻璃卡放在四种底上：光晕（浅）、光晕（深）、花底、没有光晕的平底。切强度、关亮线，看哪一项在哪种底上最显。卡上那行字是这张卡此刻的计算值。
读法：平底上玻璃几乎看不出来——磨砂得有东西可糊，光晕和玻璃是一套。花底上「不模糊」那档，后面的字和色块直接透上来。
代码
/* 视口大小的面：侧栏、顶栏、tab bar、手机底部面板 */
.side {
background: var(--glass); /* 浅 rgba(255,255,255,.62) / 深 rgba(40,42,52,.55) */
-webkit-backdrop-filter: blur(30px) saturate(160%);
backdrop-filter: blur(30px) saturate(160%);
border-right: 1px solid var(--glass-edge); /* 侧栏的亮边 */
}
/* 浮在内容上的小卡、列表、对话框、提示条 */
.card {
background: var(--glass);
-webkit-backdrop-filter: blur(24px) saturate(150%);
backdrop-filter: blur(24px) saturate(150%);
border-radius: 18px;
box-shadow: 0 10px 30px rgba(20,30,60,.08),
inset 0 1px 0 var(--glass-edge); /* 这一段就是顶边亮线 */
}
--glass-edge: rgba(255,255,255,.9); /* 深色 rgba(255,255,255,.12) */用在哪
plan：侧栏、tab bar、手机底部面板用重的一档（--blur-glass-strong），顶栏、详情对话框、菜单、提示条用轻的一档（--blur-glass）。会随正文长的面不在这里，见下面「磨砂放在哪」。本站：侧栏、顶栏、tab bar、「更多」面板都是30px·160%，条目卡不挂。
为什么
屋主要「参考苹果的UI和配色」；分层只靠玻璃、投影和分隔线，不用边框（反例在色彩页「中性底与玻璃」的对照里）。亮线放在阴影里，不占盒子、不改尺寸；浅色下.9的白很显，深色下只留.12。
坑
样张shua-glass.html是旧写法：侧栏、卡片是标准属性在前，玻璃按钮只写了backdrop-filter: blur(20px)、没配前缀。照着抄要按下面「前缀顺序」那条改过来。
出处：tools/plan/docs/design/SPEC-apple-glass.md:12「不用边框分层」、:3「屋主原话」；tools/plan/docs/design/shua-glass.html:36.side、:59.card、:11--shadow、:56.btn.glass；tools/plan/app/src/styles/tokens.css:356「--blur-glass」；tools/plan/app/src/App.css:39「--blur-glass-strong」（.sidebar）、:516「--blur-glass」（.topbar）；tools/star/assets/star.css:392「blur(30px) saturate(160%)」（.side）