--- title: 光照模型 Elevation url: https://ui.zhaozimin.com/foundations/elevation/ markdown: https://ui.zhaozimin.com/foundations/elevation.md group: 基础 origin: 设计系统源码（src/system），本仓库是唯一源头 source: - src/system/styles/v4/controls.css # https://ui.zhaozimin.com/src/system/styles/v4/controls.css version: v0.2.0 # 设计系统版本，发布于 2026-09-23 scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效 css: https://ui.zhaozimin.com/v/0.2.0/zzm.css # 锁版本地址，本仓库再改也不影响你 --- # 光照模型 Elevation > 光从正上方来。每个可交互控件都是一枚真实的键：凸面、顶部反光、贴地投影、反光光晕、按压内陷，五层缺一不可。 ## 五层，逐层叠上去 ## 四种表面 凸的是键，凹的是输入槽，浮起的是卡片。四种表面共用同一个光源，所以放在一起不打架。把鼠标移到最右边的卡链上看悬停。 ## 源码 五层光影在 `controls.css` 里是这样写的（原样裁出）： controls.css · 基键 / 悬停 / 按压： ```css .zzm-v4 .zzm-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; cursor: pointer; user-select: none; border-radius: 8px; /* 圆角矩形——按钮禁胶囊 */ border: 1px solid rgba(0, 0, 0, .14); color: #3F3F3B; background: linear-gradient(180deg, #FFFFFF 0%, #F2F2EF 100%); box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), /* ④ 反光光晕环 */ 0 1px 2px rgba(0, 0, 0, .09), /* ③ 近影 */ 0 2px 6px rgba(0, 0, 0, .06), /* ③ 远影 */ inset 0 1px 0 rgba(255, 255, 255, .92), /* ② 顶部反光 */ inset 0 -1px 0 rgba(0, 0, 0, .05); /* ① 底缘收沉 */ transition: box-shadow .16s ease, transform .16s ease, background .16s ease, border-color .16s ease, filter .16s ease, opacity .16s ease; } .zzm-v4 .zzm-btn:hover { transform: translateY(-1px); border-color: rgba(0, 0, 0, .18); box-shadow: 0 0 0 4px rgba(255, 255, 255, .8), 0 2px 4px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .09), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .05); } .zzm-v4 .zzm-btn:active { transform: translateY(0); background: linear-gradient(180deg, #ECECE9 0%, #F4F4F1 100%); /* ⑤ 凹面翻转 */ box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 1px 0 rgba(255, 255, 255, .65), inset 0 2px 4px rgba(0, 0, 0, .13), inset 0 1px 2px rgba(0, 0, 0, .09); } ``` ## 深色面上要重新标定 同一套五层模型搬到深色面（付款页、播放器锁罩）时，数值必须重标： - 顶部反光从 `.88` 左右降到 `.055` 左右——深底上任何高于 .1 的白线都会变成刺眼亮边。 - 投影要加深（`.4` 左右）。 - `--ondark` 暗面键就是重标后的结果，直接用它，不要自己调。 ## 铁律 - ✓ 要：阴影只从 `.zzm-btn` `.zzm-card` `.zzm-cardlink` `.zzm-input` 取 - ✗ 不要：在组件里散写 `box-shadow`——各写各的光源方向必然穿帮 - ✓ 要：光源永远在正上方：投影只向下 - ✗ 不要：`backdrop-filter` 模糊（性能原因全域禁用） - ✓ 要：按下去真的「凹」：`:active` 翻转渐变 + inset 阴影 - ✗ 不要：把微拟物强度原样搬进原生桌面窗口——保留结构，幅度降一个数量级 ## 本页用到的 CSS 按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）： ```css /* base.css */ .zzm-v4 input.zzm-input:focus, .zzm-v4 textarea.zzm-input:focus { border-color: #161616 !important; } /* controls.css */ .zzm-v4 .zzm-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; cursor: pointer; user-select: none; border-radius: 8px; /* 圆角矩形——按钮禁胶囊 */ border: 1px solid rgba(0, 0, 0, .14); color: #3F3F3B; background: linear-gradient(180deg, #FFFFFF 0%, #F2F2EF 100%); box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), /* ④ 反光光晕环 */ 0 1px 2px rgba(0, 0, 0, .09), /* ③ 近影 */ 0 2px 6px rgba(0, 0, 0, .06), /* ③ 远影 */ inset 0 1px 0 rgba(255, 255, 255, .92), /* ② 顶部反光 */ inset 0 -1px 0 rgba(0, 0, 0, .05); /* ① 底缘收沉 */ transition: box-shadow .16s ease, transform .16s ease, background .16s ease, border-color .16s ease, filter .16s ease, opacity .16s ease; } .zzm-v4 .zzm-btn:hover { transform: translateY(-1px); border-color: rgba(0, 0, 0, .18); box-shadow: 0 0 0 4px rgba(255, 255, 255, .8), 0 2px 4px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .09), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .05); } .zzm-v4 .zzm-btn:active { transform: translateY(0); background: linear-gradient(180deg, #ECECE9 0%, #F4F4F1 100%); /* ⑤ 凹面翻转 */ box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 1px 0 rgba(255, 255, 255, .65), inset 0 2px 4px rgba(0, 0, 0, .13), inset 0 1px 2px rgba(0, 0, 0, .09); } .zzm-v4 .zzm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(166, 64, 47, .20), /* 键盘焦点＝朱色光晕 */ 0 1px 2px rgba(0, 0, 0, .09), 0 2px 6px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .92); } .zzm-v4 .zzm-btn:disabled { cursor: not-allowed; transform: none; } .zzm-v4 .zzm-btn:disabled:not(.zzm-btn--busy) { color: #A2A29C; background: #F2F2EF; border-color: rgba(0, 0, 0, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .04); } .zzm-v4 .zzm-cardlink { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, .09); border-radius: 16px; padding: 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .zzm-v4 .zzm-cardlink:hover { transform: translateY(-3px); border-color: rgba(0, 0, 0, .3); box-shadow: 0 10px 30px rgba(0, 0, 0, .09), 0 1px 2px rgba(0, 0, 0, .04); } .zzm-v4 .zzm-card { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, .09); border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .85); } .zzm-v4 input.zzm-input, .zzm-v4 textarea.zzm-input { background: #FDFDFC; box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, .06), inset 0 1px 1px rgba(0, 0, 0, .04); } .zzm-v4 input.zzm-input:focus, .zzm-v4 textarea.zzm-input:focus { box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, .06), 0 0 0 3px rgba(22, 22, 22, .07); /* 聚焦光晕 */ } ``` --- 上一页：[圆角与细线](https://ui.zhaozimin.com/foundations/radius.md) · 下一页：[动效](https://ui.zhaozimin.com/foundations/motion.md) · 全站目录：https://ui.zhaozimin.com/llms.txt