elevation.md
基础 · FOUNDATION

光照模型 Elevation

光从正上方来。每个可交互控件都是一枚真实的键：凸面、顶部反光、贴地投影、反光光晕、按压内陷，五层缺一不可。

来源同步自 edu v23.5.1源styles/v4/controls.css机读foundations/elevation.md

五层，逐层叠上去

四种表面

凸的是键，凹的是输入槽，浮起的是卡片。四种表面共用同一个光源，所以放在一起不打架。把鼠标移到最右边的卡链上看悬停。

源码

五层光影在 controls.css 里是这样写的（原样裁出）：

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);
}

深色面上要重新标定

同一套五层模型搬到深色面（付款页、播放器锁罩）时，数值必须重标：

  • 顶部反光从 .88 左右降到 .055 左右——深底上任何高于 .1 的白线都会变成刺眼亮边。
  • 投影要加深（.4 左右）。
  • --ondark 暗面键就是重标后的结果，直接用它，不要自己调。

铁律

✓ 要阴影只从 .zzm-btn .zzm-card .zzm-cardlink .zzm-input 取
✗ 不要在组件里散写 box-shadow——各写各的光源方向必然穿帮
✓ 要光源永远在正上方：投影只向下
✗ 不要backdrop-filter 模糊（性能原因全域禁用）
✓ 要按下去真的「凹」：:active 翻转渐变 + inset 阴影
✗ 不要把微拟物强度原样搬进原生桌面窗口——保留结构，幅度降一个数量级