CSS 复现 23 种设计风格：从拟物到液态玻璃的成本阶梯与兜底写法【实战】

液态玻璃上线 16 个月后，苹果在 iOS 26.1 给它加了个开关。这篇文章用 CSS 复现 2007--2028 年的 23 种设计风格，回答三个工程问题：

每种风格的复现代码是什么（可直接跑）
哪些写法有兜底，哪些是裸奔
什么场合该用什么，什么场合绝对别用

所有代码在 GitHub 仓库（文末），单文件 HTML 可离线打开。

成本阶梯：一条工程铁律

年代	风格	复现成本
2007--2013	拟物	每种材质一套图层/阴影栈
2013--2015	扁平	一个 hex
2020--2021	玻璃拟态	一行 backdrop-filter
2025	液态玻璃	系统开关（Web 侧仍需近似写法）
2024 起	AI 生成	prompt 一句话

工程结论：质感的单位成本只会降，不会升。所以判断一个新风格值不值得跟，看的不是好不好看，是它的成本结构会不会继续塌。

核心代码：四种必须掌握的写法

1. 玻璃拟态（有兜底，生产可用）

css 复制代码

.glass {
  /* 三件套：半透明填充 + 背景模糊 + 发丝边 */
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 16px;
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(28,30,38,.92); } /* 兜底实色 */
}

这是整个复现里最重要的一段。玻璃拟态比新拟态活得久，原因就一条：它有兜底写法 。@supports 查询让不支持的浏览器退化成半透明实色，界面照样能用。

2. 新拟态（对比度杀手，慎入生产）

css 复制代码

.neu {
  background: #e0e5ec;      /* 必须和页面底色同色 */
  border-radius: 14px;
  box-shadow: 8px 8px 16px #b8bec7,
              -8px -8px 16px #ffffff;
}

EULE Institute 实测：新拟态元素与背景对比度仅 1.2:1--1.5:1，WCAG 2.2 AA 要求 UI 组件 3:1。浮雕感与对比度在数学上互斥。作品集可以玩，生产环境的交互控件先过对比度测试。

3. 液态玻璃近似（带透明度偏好兜底）

css 复制代码

.lg {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) brightness(1.1);
  border-radius: 22px;
  /* 玻璃边：上亮下暗，模拟厚边折射 */
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55),
              inset 0 -1.5px 0 rgba(255,255,255,.14),
              0 10px 40px rgba(0,0,0,.28);
}
@media (prefers-reduced-transparency: reduce) {
  .lg { background: rgba(22,24,32,.94); backdrop-filter: none; }
}

两个细节苹果有而 CSS 没有：系统级 GPU 合成、实时环境光适配。Web 侧只能逼近。苹果自己的指南也不建议它用在内容层------数据屏（表格、表单）跳过，导航和浮层可用。

4. 反 AI 默认值（把决定写进 token）

css 复制代码

/* 反模式：三处默认值同时出现 = 没人做过决定 */
.hero-ai {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(99,102,241,.45);
}
/* 修复：把决定写进 token，CI 拦住默认值 */
:root {
  --brand: oklch(62% .19 28);  /* 一个真品牌色 */
  --radius-card: 6px;          /* 克制的圆角 */
}

Cursor 设计负责人 Ryo Lu 点名的 AI 界面三张烂脸：紫色渐变、夸张阴影、可预测字体。Wes Bos 称之为 four horsemen。反制方案：设计 token 写死 + CI pattern lint，构建失败即拦截。

选型清单（工程视角）

场景	用	别用
B 端后台/数据屏	扁平 / Material / 暗黑	液态玻璃、新拟态、酸性
浮层导航	玻璃（必须带 @supports 兜底）	无兜底半透明
营销 hero	大字 / 极光 mesh / 便当盒	AI 默认三件套
作品集/活动页	新粗野、酸性、CRT	------
解释型内容	2.5D 等距、便当盒	纯装饰 3D

三条通用规则：

任何半透明效果，先写兜底（@supports 或 prefers-reduced-transparency）
上线前跑对比度测试，3:1 是 UI 组件的生死线（WCAG 2.2 AA）
3D/动画上性能预算：38% 用户因「不好看」离开，39% 因「太慢」离开，慢比丑死得快

23 种风格全名单

每种的可运行 CSS 在仓库里逐个文件对应，本地打开即可核对。

1. 拟物化 Skeuomorphism（2007--2013，序章）

css 复制代码

.skeuo {
  background: linear-gradient(#9c6b3f, #7a4f2a);
  color: #f7ead7;
  border: 1px solid #5d3a1c;
  outline: 1px dashed rgba(255,255,255,.35);
  outline-offset: -4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25),
              0 2px 8px rgba(0,0,0,.45);
}

2. 扁平化 Flat Design（2013--2015）

css 复制代码

.btn-flat {
  background: #007aff;   /* iOS 7 系统蓝 */
  color: #fff;
  border: none;           /* 没有描边 */
  border-radius: 6px;     /* 轻圆角，不靠阴影分层 */
  padding: 10px 22px;
  font-weight: 600;
}

3. Flat 2.0 + 长投影（2015--2016）

css 复制代码

.flat2 {
  background: #ff5a5f;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(255,90,95,.4); /* 有色阴影 */
}
.longshadow { position: relative; background: #e74c3c; }
.longshadow::after {      /* 45° 渐变假装是影子 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(45deg,
    rgba(0,0,0,.22) 45%, transparent 46%);
  transform: translate(10px, 10px);
  z-index: -1;
}

4. 材质设计 Material Design（Google，2014--2016）

css 复制代码

.card-material {
  background: #fff;
  border-radius: 4px;
  /* 海拔：两层阴影，近的清、远的糊 */
  box-shadow: 0 1px 3px rgba(0,0,0,.12),
              0 1px 2px rgba(0,0,0,.24);
}
.fab {
  width: 56px; height: 56px; border-radius: 50%;
  background: #ff4081; color: #fff;
  box-shadow: 0 6px 10px rgba(0,0,0,.3);
}

5. 2.5D / 等距 Isometric（2016--2018）

css 复制代码

.iso-stage { perspective: 800px; }
.iso-plane {
  transform: rotateX(55deg) rotateZ(45deg);
  transform-style: preserve-3d;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.14) 0 1px, transparent 1px 40px),
    linear-gradient(160deg, #1f2937, #0f172a);
}

6. 双色调 Duotone（2017--2018）

css 复制代码

.duotone { position: relative; }
.duotone img { filter: grayscale(1) contrast(1.1); }
.duotone::after {         /* 品牌色两色叠加 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, #1db954, #191414);
  mix-blend-mode: screen; /* Spotify 配方 */
}

7. 新拟态 Neumorphism（2019--2020）

css 复制代码

.neu {
  background: #e0e5ec;      /* 必须和页面底色同色 */
  border-radius: 14px;
  box-shadow: 8px 8px 16px #b8bec7,
              -8px -8px 16px #ffffff;
}
.neu:active {
  box-shadow: inset 4px 4px 8px #b8bec7,
              inset -4px -4px 8px #ffffff;
}

8. 玻璃拟态 Glassmorphism（2020--2021）

css 复制代码

.glass {
  /* 三件套：半透明填充 + 背景模糊 + 发丝边 */
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 16px;
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(28,30,38,.92); } /* 兜底实色 */
}

9. 暗黑模式 Dark Mode（2019--2021）

css 复制代码

:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;   /* 别用纯黑，会漏光 */
    --fg: #e6e6e6;   /* 别用纯白，会刺眼 */
  }
}

10. 新粗野主义 Neubrutalism（2020--2023）

css 复制代码

.neo {
  background: #ffe219; color: #141414;
  border: 3px solid #141414;   /* 粗黑边 */
  border-radius: 0;            /* 直角 */
  box-shadow: 6px 6px 0 0 #141414; /* 硬投影，零模糊 */
}
.neo:active {
  transform: translate(6px, 6px);
  box-shadow: none;            /* 按下去 = 影子被吃掉 */
}

11. 粘土风 Claymorphism（2021--2022）

css 复制代码

.clay {
  background: #ffd9e3;
  border-radius: 26px;
  /* 两内一外：充气感 */
  box-shadow: inset 5px 5px 10px rgba(255,255,255,.75),
              inset -5px -5px 12px rgba(203,92,124,.35),
              14px 14px 28px rgba(203,92,124,.22);
}

12. 极光渐变 Aurora / Mesh（2021--2022）

css 复制代码

.aurora {
  min-height: 100vh;
  background:
    radial-gradient(42% 55% at 18% 24%, #7c3aed 0%, transparent 62%),
    radial-gradient(46% 46% at 82% 18%, #22d3ee 0%, transparent 58%),
    radial-gradient(48% 48% at 62% 82%, #f472b6 0%, transparent 58%),
    #0b1020;
}
/* 进阶：background-size: 200% 200% 后
   animation: drift 18s ease-in-out infinite alternate; */

13. 便当盒布局 Bento Grid（2022--2023）

css 复制代码

.bento {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 110px;
}
.bento .span2 { grid-column: span 2; }
.bento .row2  { grid-row: span 2; }
.bento > * { border-radius: 18px; }

14. 酸性设计 Acid / Y2K Grunge（2022--2024）

css 复制代码

.acid {
  background: #0a0a0a;
  color: #d9ff00;
  font-family: "Arial Black", sans-serif;
  text-transform: uppercase;
  text-shadow: 2px 0 #ff00c8, -2px 0 #00fff9; /* 色差 */
  filter: contrast(1.4);                        /* 镀铬噪感 */
}

15. 复古终端 CRT（2022--2024）

css 复制代码

.crt {
  background: #001100;
  color: #33ff66;
  font-family: "Courier New", monospace;
}
.crt::after {          /* 2px 一条扫描线 */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 2px);
  pointer-events: none;
}

16. 3D 元素复兴（2023--2024）

css 复制代码

.hero3d { perspective: 900px; }
.hero3d .card {
  transform: rotateY(-14deg) rotateX(8deg);
  transition: transform .4s ease;
}
.hero3d:hover .card { transform: rotateY(0) rotateX(0); }
/* 进阶：Spline <spline-viewer> 或 R3F，
   记得 lazy 加载 + 低端机降级 */

17. 大字排版 Big Type（2023--2024）

css 复制代码

.bigtype h1 {
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
}

18. Frutiger Aero 复兴（2024--2026）

css 复制代码

.aero-orb {
  width: 96px; height: 96px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #cdeeff 0%, #4aa8e8 100%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 6px 18px rgba(30,120,190,.35);
}

19. AI 均质化 AI Slop（2024--2026，反思对象）

css 复制代码

/* 反模式：三处默认值同时出现 = 没人做过决定 */
.hero-ai {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(99,102,241,.45);
}
/* 修复：把决定写进 token，CI 拦住默认值 */
:root {
  --brand: oklch(62% .19 28);  /* 一个真品牌色 */
  --radius-card: 6px;          /* 克制的圆角 */
}

20. 液态玻璃 Liquid Glass（2025--2026，Web 近似）

css 复制代码

.lg {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) brightness(1.1);
  border-radius: 22px;
  /* 玻璃边：上亮下暗，模拟厚边折射 */
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55),
              inset 0 -1.5px 0 rgba(255,255,255,.14),
              0 10px 40px rgba(0,0,0,.28);
}
@media (prefers-reduced-transparency: reduce) {
  .lg { background: rgba(22,24,32,.94); backdrop-filter: none; }
}

21. 空间计算界面 Spatial UI（2024--2026）

css 复制代码

.spatial-win {
  border-radius: 24px;        /* visionOS 窗口默认大圆角 */
  background: rgba(20,20,24,.55);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
/* 网页近似 = 玻璃 + 大圆角 + 深度阴影；
   真机三件套是 Window / Volume / Space */

22. 环境式界面 Ambient UI（2027--2028，预测）

css 复制代码

/* 预测口径：界面按环境光与场景自适应，
   「打开 App」这个动作本身在消失 */
.ambient { background: transparent; }
@media (prefers-contrast: more) {
  .ambient { --chrome: transparent; --ink: #000; }
}
.ambient .card { border: none; box-shadow: none; }

23. 生成式界面 Generative UI（2027--2028，预测）

css 复制代码

/* 预测口径：布局由 agent 按意图生成，
   你的设计系统只负责渲染，不负责写死 */
.gen-card { container-type: inline-size; }
@container (min-width: 480px) {
  .gen-card { grid-template-columns: 1fr 1fr; }
}
/* A2UI：agent 输出结构化布局消息，
   客户端渲染，不执行 agent 的代码 */

原创技术博客 · 开源项目分享 · AI全栈创作社区 idao.fun