光影对照试板

这一页只做一件事：把可对比的选项并排摆出来。每一块下面标了完整参数，并配一段可直接复制的 CSS。

四组：① 阴影方案 × 4　② 光照方向 × 3　③ 浅底 / 深底 × 2　④ 质感 × 3 + 过重对照 × 1

本页不含评价结论：不排序、不推荐、不标注「更好」。

⑤ 可调面板 · 三色 + 三层阴影

选个预设当起点 → 拖滑块实时看 → 起名保存 → 导出 CSS / JSON。滑块是原生 range，鼠标和手指都能拖；预览是纯前端，不发请求（只有「保存」才写存储）。面板只给参数，不做评价。

三色（每组：取色器 + HEX + H/S/L）

背景色
H
S
L
文字色
H
S
L
点缀色
H
S
L

三层阴影（色相 = 点缀色）

近层
blur
offset
alpha
中层
blur
offset
alpha
远层
blur
offset
alpha

实时预览

卡片

预览里卡面 = 背景色与文字色按 92 : 8 混合（面板固定的推算规则，没藏别的值）；低、文字、点缀三个色就是上面那三个控件。

点「导出」在这里生成 CSS
点「导出」在这里生成 JSON

① 阴影对照 · 同一张卡片 × 4 种方案

底色、卡面色、圆角、尺寸四块完全一致，只有 box-shadow 不同。方向统一为 y 轴向下（正下方）。

1-A廉价版

卡片

阴影色 rgba(0,0,0,.5) 纯黑
层数 1
offset 0 / 4px
blur 10px
alpha .50 单层
方向 y+ 正下 

/* 1-A 廉价版：纯黑 · 单层 · 硬 */
.card{
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  /* 0 = offset-x 水平不动
     4px = offset-y 向下
     10px = blur 模糊半径
     rgba(0,0,0,.5) = 纯黑 50% 透明（不带色相）
     没有第二、第三层 → 边缘收得硬 */
}

1-B规范版 · 三层带色

卡片

阴影色 rgba(37,62,150,x) 蓝紫（非黑）
层数 3
近层 offset 0/2px · blur 4px · alpha .16
中层 offset 0/10px · blur 18px · alpha .12
远层 offset 0/28px · blur 40px · alpha .10
方向 y+ 逐层下移，alpha 递减（.16→.12→.10） 

/* 1-B 规范版：带色 · 三层 · alpha 递减 */
.card{
  box-shadow:
    0 2px 4px  rgba(37,62,150,.16),   /* 近层：贴边 2-4px，收口 */
    0 10px 18px rgba(37,62,150,.12),  /* 中层：8-16px 体积 */
    0 28px 40px rgba(37,62,150,.10);  /* 远层：24-40px 扩散 */
  /* 三层的 color 是同一个色相 rgba(37,62,150)
     只有 alpha 递减：.16 → .12 → .10
     offset-y 递增：2 → 10 → 28
     blur 递增：4 → 18 → 40 */
}

1-C更轻版

卡片

阴影色 rgba(37,62,150,x) 与 1-B 同色相
层数 3
近层 offset 0/1px · blur 2px · alpha .08
中层 offset 0/5px · blur 9px · alpha .06
远层 offset 0/14px · blur 20px · alpha .05
方向 y+，与 1-B 同向；相对 1-B：offset/blur/alpha 三层各取一半 

/* 1-C 更轻版：= 1-B 三层各减半 */
.card{
  box-shadow:
    0 1px 2px  rgba(37,62,150,.08),   /* 1-B 的 2/4/.16 取半 */
    0 5px 9px  rgba(37,62,150,.06),   /* 1-B 的 10/18/.12 取半 */
    0 14px 20px rgba(37,62,150,.05);  /* 1-B 的 28/40/.10 取半 */
  /* 色相不变、方向不变，只有三个数值档位整体下移 */
}

1-D更重版

卡片

阴影色 rgba(37,62,150,x) 与 1-B 同色相
层数 3
近层 offset 0/3px · blur 6px · alpha .26
中层 offset 0/16px · blur 26px · alpha .20
远层 offset 0/44px · blur 64px · alpha .16
方向 y+，与 1-B 同向；相对 1-B：offset ×1.6、blur ×1.6、alpha ×1.6 

/* 1-D 更重版：= 1-B 三层各加重约 1.6 倍 */
.card{
  box-shadow:
    0 3px 6px  rgba(37,62,150,.26),   /* 近层加重 */
    0 16px 26px rgba(37,62,150,.20),  /* 中层加重 */
    0 44px 64px rgba(37,62,150,.16);  /* 远层加重，扩散到 64px */
  /* 远层 44px/64px 已接近卡片高度(108px)的一半，为四块里的极端值 */
}

1-D 是本组数值最极端的一块（远层 offset 44px / blur 64px / alpha .16），看边界时重点看它。

② 光照方向对照 · 光位不同，其余固定

三块卡片底色、阴影色相 rgba(37,62,150,…)、层数、blur 全部一致，只有 offset-x / offset-y 与 alpha 随光位改。上面那个小光点标出光源所在方位。

2-A光从左上

卡片

光源方位 左上（约 315°，水平偏左）
阴影色 rgba(37,62,150,x)
层数 2
近层 offset 6px / 8px · blur 16px · alpha .18
中层 offset 18px / 24px · blur 40px · alpha .12
方向 x+ y+ → 阴影落向右下 

/* 2-A 光从左上 → 阴影落右下 */
.card{
  box-shadow:
    6px 8px 16px  rgba(37,62,150,.18),   /* offset-x=+6px offset-y=+8px */
    18px 24px 40px rgba(37,62,150,.12);  /* 远层同向放大：+18 / +24 */
}

2-B光从正上

卡片

光源方位 正上（90°，水平居中）
阴影色 rgba(37,62,150,x)
层数 2
近层 offset 0 / 10px · blur 20px · alpha .16
中层 offset 0 / 26px · blur 44px · alpha .11
方向 x=0 y+ → 阴影正下方，左右对称 

/* 2-B 光从正上 → 阴影只在正下方 */
.card{
  box-shadow:
    0 10px 20px rgba(37,62,150,.16),   /* offset-x=0 → 左右对称 */
    0 26px 44px rgba(37,62,150,.11);
}

2-C光从左上偏强

卡片

光源方位 左上更远、更亮（水平偏左加大）
阴影色 rgba(37,62,150,x)
层数 2
近层 offset 12px / 12px · blur 18px · alpha .26
中层 offset 30px / 30px · blur 48px · alpha .16
方向 x+ y+ 等量（45°），alpha 相对 2-A 提高 

/* 2-C 光从左上偏强 → 阴影 45° 右下、更深 */
.card{
  box-shadow:
    12px 12px 18px rgba(37,62,150,.26),   /* x 与 y 相等=45°；alpha 升到 .26 */
    30px 30px 48px rgba(37,62,150,.16);
  /* 与 2-A 的差别：offset 更大、x 与 y 相等、alpha 更高 */
}

③ 浅底 vs 深底 · 同一套规范，两种底色

两块卡片尺寸、圆角一致，底色不同（浅底 #f4f6fb / 深底 #0d1016）。以下参数表逐项列出两边的值。

3-L浅底 · 软、淡、偏蓝紫

卡片

底色 #f4f6fb
卡面色 #ffffff
阴影色 rgba(78,92,180,x) 蓝紫（低饱和）
层数 3
alpha .10 / .08 / .06（逐层递减）
blur 6 / 24 / 48px（扩散大）
offset 0/2px · 0/12px · 0/30px
高光边 无（border:0）
托起机制 靠阴影本身的面积与扩散 

/* 3-L 浅底：软、淡、偏蓝紫 */
.card{
  background:#ffffff;
  border:0;                              /* 无高光边 */
  box-shadow:
    0 2px 6px  rgba(78,92,180,.10),      /* 近层淡 */
    0 12px 24px rgba(78,92,180,.08),     /* 中层淡 */
    0 30px 48px rgba(78,92,180,.06);     /* 远层淡、扩散最大 */
  /* 关键值：alpha 低(.06-.10)、blur 大(6-48px)、色相偏蓝紫 */
}

3-D深底 · 深、带饱和色 + 高光边

卡片

底色 #0d1016
卡面色 #1c2129
阴影色 rgba(0,0,0,x) + rgba(12,28,96,x) 饱和深蓝
层数 3 + 1 高光层
alpha .60 / .55 / .50（接近满值）
blur 4 / 18 / 44px
offset 0/2px · 0/12px · 0/30px
高光边 inset 0 1px 0 rgba(255,255,255,.18) + border 1px rgba(255,255,255,.10)
托起机制 靠边界高光把物体从底上切出来 

/* 3-D 深底：深、带饱和色 + 高光边 */
.card{
  background:#1c2129;
  border:1px solid rgba(255,255,255,.10);          /* 边界线 */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),           /* ★ 顶部 1px 高光边 */
    0 2px 4px   rgba(0,0,0,.60),                   /* 近层近黑 */
    0 12px 18px rgba(2,8,32,.55),                  /* 中层深蓝 */
    0 30px 44px rgba(12,28,96,.50);                /* 远层饱和蓝 */
  /* 关键值：alpha 高(.50-.60)、blur 相对小(4-44px)、
     额外一条 inset 高光 */
}
参数项3-L 浅底3-D 深底
底色#f4f6fb#0d1016
卡面色#ffffff#1c2129
阴影色相rgba(78,92,180,…) 蓝紫、低饱和rgba(0,0,0,…) + rgba(12,28,96,…) 接近纯黑 + 高饱和深蓝
alpha（三层）.10 / .08 / .06.60 / .55 / .50
blur（三层）6 / 24 / 48 px4 / 18 / 44 px
offset-y（三层）2 / 12 / 30 px2 / 12 / 30 px（此项两边相同）
高光边无inset 0 1px 0 rgba(255,255,255,.18)
边界线无1px solid rgba(255,255,255,.10)
层数33 + 1（高光层）
托起手段阴影本身高光边 + 阴影

两边的 alpha 走向相反（浅底 .10→.06 递减 / 深底 .60→.50 递减但在数量级上相反），blur 走向也相反（浅底 6→48 加大 / 深底 4→44 收窄）；offset 一项两边相同，是唯一没变的量。

④ 质感对照 · 三样「极淡」+ 一个过重对照

前三块都是极淡档；第四块把三样同时加重，用来看分界线落在哪。四块底色一致 #e2e7f2。

4-A1px 半透明白细边

卡片

边框 1px solid rgba(255,255,255,.42)
额外 无 inset
阴影 0 8px 18px rgba(37,62,150,.18)（陪衬，与其他块一致） 

/* 4-A 1px 半透明白细边 */
.card{
  border:1px solid rgba(255,255,255,.42);
  /* 白色 .42：在中间调卡面上形成一条亮边
     想更明显 → alpha 提高；想更淡 → 降到 .15 左右 */
  box-shadow:0 8px 18px rgba(37,62,150,.18);
}

4-B极淡内阴影

卡片

inset 是
offset 0 / 2px
blur 4px
alpha .06
色 rgba(20,30,80,x) 

/* 4-B 极淡内阴影（凹） */
.card{
  box-shadow:inset 0 2px 4px rgba(20,30,80,.06);
  /* inset = 阴影画在边框内侧
     offset-y 2px = 光从上方进、上沿压暗
     alpha .06 是极淡档；往上调到 .20 就开始明显 */
}

4-C极淡渐变覆盖

卡片

渐变 linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%)
覆盖层 absolute inset:0，pointer-events:none 建议加
阴影 0 8px 18px rgba(37,62,150,.16) 

/* 4-C 极淡渐变覆盖（体积感） */
.card{position:relative;overflow:hidden}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%,     /* 顶部最亮 */
    rgba(255,255,255,0) 70%);     /* 70% 处归零 */
  /* 停在 70% 而不是 100%，下沿不发光 → 上亮下暗的体积感
     只改 .55 这个 alpha 就能加减强度 */
}

4-D过重对照（三样同时加重）

卡片

边框 2px solid rgba(255,255,255,.92)（4-A 是 1px / .42）
内阴影 inset 0 8px 14px rgba(0,0,0,.35)（4-B 是 2px/4px/.06）
渐变 rgba(255,255,255,.92)→.30 全程 100%（4-C 是 .55→0 停在 70%） 

/* 4-D 过重对照：三样同时加重 */
.card{
  position:relative; overflow:hidden;
  border:2px solid rgba(255,255,255,.92);              /* 边 1px→2px、.42→.92 */
  box-shadow:inset 0 8px 14px rgba(0,0,0,.35);         /* 内阴影 4px→14px、.06→.35 */
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.92) 0%, rgba(255,255,255,.30) 100%);   /* 走到 100% */
}

4-D 是本组唯一的重档对照，数值均取到极端（2px 边 / inset .35 / 渐变走满 100%），看分界线时重点看它。

参数源文件：/opt/inventory/lighting_spec.md（四组完整参数）

本页为纯静态 HTML + CSS，无外部资源、无网络请求。