23 种 CSS 设计风格如何按成本实现并兼容兜底

把 23 种视觉风格理解成 23 套互不相关的模板，是最容易走偏的地方。落到 CSS，它们大多只是颜色、阴影、圆角、透明度、滤镜、变换和布局等属性的不同组合，真正需要比较的是实现、渲染、兼容和维护成本。

掘金热帖《CSS 复现 23 种设计风格：从拟物到液态玻璃的成本阶梯与兜底写法【实战】》提供了按成本组织内容的思路。 我的结论更直接：普通业务页面优先从 T0、T1 开始；T2、T3 只有在目标设备、背景复杂度和文字可读性都经过验证后再启用。默认样式先保证可读，透明、模糊和高光再通过 @supports 逐层添加，动画按需启用。

横向测试使用同一个卡片组件，包含标题、正文、标签、按钮、表单控件和焦点状态，背景覆盖纯色、图片、视频、动态渐变以及浅色和深色主题。这样比较的重点不是截图是否“像某种风格”，而是效果在哪个能力分支失效、失效后是否还能保持相同的信息层级和操作反馈。

先算清每种风格依赖的 CSS 能力

视觉复杂度不等于浏览器成本。一个多阴影按钮未必比单层渐变昂贵，真正拉开差距的是模糊面积、透明层数量、背景是否持续变化，以及动画是否反复触发绘制。因此不能只按“像不像”分档，而要把成本拆成四项。

按这些成本可以把实现划成四档。同一种风格如果降低精度，可能直接降档；例如单层玻璃可以停在 T1，而大面积、多层、带动态折射的玻璃会进入 T3。

以下矩阵按同一组件的实际实现方式整理 23 种风格。矩阵中的档位针对较高完成度版本，单色、纯边框等简化实现可以下沉到更低档位。

拟物化的核心并不是“阴影多”，而是让高光、阴影、边框和渐变共同模拟一种材质。下面的实现已经比完整拟物界面克制，但仍然保留了可辨认的表面关系。

.skeuo-card {
  color: #2d1b0e;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 42%),
    linear-gradient(180deg, #a87342, #79502d);
  border: 1px solid #56371f;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 2px 8px rgba(0, 0, 0, .28);
}

.skeuo-card--low {
  background: #865830;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

低精度版本不是浏览器不支持时自动出现的分支，而是组件设计时就提供的简化方案。拟物化尤其适合票据、账单等局部对象，不适合把整张数据表改造成由几十层材质组成的界面。

Glassmorphism 也不能简化为一个 blur 属性。透明背景决定透射程度，采样区域决定背后内容是否被模糊，边缘负责表达玻璃厚度，阴影则补足悬浮关系；这些因素共同决定最终质感。

.glass-card {
  --glass-solid: #f7f8fa;
  --glass-tint: rgba(247, 248, 250, .72);

  color: #18202a;
  background: var(--glass-solid);
  border: 1px solid rgba(24, 32, 42, .18);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
}

@supports (backdrop-filter: blur(1px) saturate(120%)) {
  .glass-card {
    background: var(--glass-tint);
    backdrop-filter: blur(14px) saturate(120%);
  }
}

@supports (-webkit-backdrop-filter: blur(1px) saturate(120%)) {
  .glass-card {
    background: var(--glass-tint);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
  }
}

默认背景保持实体高不透明度，只有检测到背景模糊能力后才切换为半透明表面。这里不能照搬某个固定透明度：长文本、业务表格和复杂图片背景需要更实的遮罩，装饰性标签或短按钮才适合更明显的透射效果。

液态玻璃比普通玻璃多了一层边缘、高光和动态背景关系。纯 CSS 可以模拟高光与近似边缘，但不能把这种效果描述成真正的物理折射；下面的版本仍然把实体背景作为兜底。

.liquid-card {
  --liquid-solid: #edf2f6;
  --liquid-tint: rgba(237, 242, 246, .58);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--liquid-solid);
  border: 1px solid rgba(24, 32, 42, .16);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
}

.liquid-card::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, .72),
    transparent 38%,
    rgba(129, 178, 255, .24)
  );
  opacity: .45;
  pointer-events: none;
}

.liquid-card > * {
  position: relative;
  z-index: 1;
}

.liquid-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .72),
    inset -1px -1px 0 rgba(63, 88, 120, .16);
  pointer-events: none;
}

@supports (backdrop-filter: blur(1px)) {
  .liquid-card {
    background: var(--liquid-tint);
    backdrop-filter: blur(16px) saturate(135%);
  }
}

@supports (-webkit-backdrop-filter: blur(1px)) {
  .liquid-card {
    background: var(--liquid-tint);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .liquid-card--ambient::before {
    animation: liquid-drift 12s ease-in-out infinite alternate;
  }
}

@keyframes liquid-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, 1%, 0) scale(1.06); }
}

这里的动画只移动高光层，不持续改变模糊半径。它能增加环境感，但不构成真实折射，也能减少背景采样不断失效带来的压力。

每次测试不必保存一张大截图，只要固定五项字段，就能把视觉结果转换成可复用的工程数据。

在统一组件里测出兼容与性能边界

兼容性结论必须附带测试日期和浏览器版本，但长期复制一张版本表很容易过期。更稳妥的做法是固定目标环境，把完整版本、操作系统和测试日期随每次发布归档。Android WebView 尤其不能只写一个“Android Chrome 版本”，因为它由系统组件和设备更新共同决定。

当前项目资料没有附带这批环境的真实运行日志，因此这里不预填具体版本、绘制耗时或帧率，也不使用“全浏览器支持”这类无法核验的结论。正式发布时，应将下面五个环境全部跑完，并把实际版本、日期和结果写入发布记录。

浏览器能力可以在测试页面中直接探测。下面代码只用于记录环境，不通过 User-Agent 推断能力；User-Agent 只作为版本归档信息保留。

const features = [
  ["backdrop-filter", CSS.supports(
    "backdrop-filter",
    "blur(1px) saturate(120%)"
  )],
  ["-webkit-backdrop-filter", CSS.supports(
    "-webkit-backdrop-filter",
    "blur(1px) saturate(120%)"
  )],
  ["filter", CSS.supports("filter", "blur(1px)")],
  ["mask-image", CSS.supports(
    "mask-image",
    "linear-gradient(#000, #000)"
  )],
  ["mix-blend-mode", CSS.supports(
    "mix-blend-mode",
    "multiply"
  )],
  ["transform-3d", CSS.supports(
    "transform",
    "translate3d(0, 0, 0)"
  )]
];

console.table(
  features.map(([feature, supported]) => ({
    feature,
    supported
  }))
);

console.info("testedAt:", new Date().toISOString());
console.info("userAgent:", navigator.userAgent);

CSS.supports() 只能回答“能否解析这项能力”，不能回答设备是否跑得动，也不能保证文字对比度合格。性能测试应把同一组件放入逐步增加负担的场景，而不是一次把所有效果全部打开。

排查“效果没有出现”时，顺序应当是：先确认标准属性是否受支持，再检查厂商前缀，最后确认背景采样区域、层叠上下文和父级裁剪是否改变了结果。外观看起来像“模糊失效”，不代表浏览器一定不支持该属性。

排查“效果存在但页面变慢”时，则要分开检查四个变量：模糊面积是否扩大、玻璃层是否重叠、背景是否持续变化、动画是否频繁改变需要重新计算的属性。只观察最终帧率，很容易把这四类问题混成一句“显卡性能不足”。

扫描线、发光和故障效果还要分别运行正常动画与减少动态效果状态。前者用于确认视觉与性能，后者用于确认用户关闭动态效果后仍能获得完整信息。故障效果只做小幅位移，不依赖高频闪烁；所有关键状态都应由文字、边框或图标共同表达。

按能力缺失逐级替换而不破坏信息层级

玻璃效果最稳妥的顺序不是先判断浏览器版本，而是先建立不依赖增强能力的默认状态，再依次加入半透明背景、背景模糊、高光和动态效果。缺少哪一层，就停在哪一层。

下面的组件同时处理浅色、深色、焦点、减少动态效果和高对比度模式。兜底与增强只改变背景、滤镜和装饰，不改变盒模型，因此不会出现因增强失败导致的尺寸跳动。

.glass-panel {
  --panel-solid: #f7f8fa;
  --panel-tint: rgba(247, 248, 250, .78);
  --panel-border: rgba(24, 32, 42, .18);
  --panel-text: #18202a;
  --panel-focus: #075bd8;

  color: var(--panel-text);
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}

@supports (backdrop-filter: blur(1px) saturate(120%)) {
  .glass-panel {
    background: var(--panel-tint);
    backdrop-filter: blur(14px) saturate(120%);
  }
}

@supports (-webkit-backdrop-filter: blur(1px) saturate(120%)) {
  .glass-panel {
    background: var(--panel-tint);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
  }
}

@media (prefers-color-scheme: dark) {
  .glass-panel {
    --panel-solid: #171b22;
    --panel-tint: rgba(23, 27, 34, .82);
    --panel-border: rgba(255, 255, 255, .2);
    --panel-text: #f3f5f7;
    --panel-focus: #8ab4ff;
  }
}

.glass-panel--reading {
  --panel-tint: rgba(247, 248, 250, .92);
}

@media (prefers-color-scheme: dark) {
  .glass-panel--reading {
    --panel-tint: rgba(23, 27, 34, .92);
  }
}

.glass-panel :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--panel-focus);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .glass-panel {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .glass-panel::before,
  .glass-panel::after {
    content: none;
  }

  .glass-panel :where(a, button, input, select, textarea):focus-visible {
    outline-color: Highlight;
  }
}

属性缺失时，替换关系应保持简单。

扫描线和故障位移也应该有明确的静态版本。下面这段只移动装饰层，不改变布局；关闭动态效果后，扫描线停在静态位置，故障文字恢复原位。

.cyberpunk__scan {
  animation: cyber-scan 2.4s linear infinite;
}

.cyberpunk__glitch {
  animation: cyber-glitch 4s ease-in-out infinite;
}

@keyframes cyber-scan {
  from { transform: translateY(-120%); }
  to   { transform: translateY(120%); }
}

@keyframes cyber-glitch {
  0%, 90%, 100% { transform: translate3d(0, 0, 0); }
  93% { transform: translate3d(-2px, 0, 0); }
  96% { transform: translate3d(2px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cyberpunk__scan,
  .cyberpunk__glitch,
  .aurora__glow,
  .liquid-card--ambient::before {
    animation: none !important;
  }
}

性能兜底不应通过设备名称猜测能力。更可靠的做法是缩小模糊面积、减少同时透明的层数、取消持续动画，并避免直接改变模糊半径。transform 和 opacity 可以用于有限的环境动效，但不能替代对滚动性能的验证。

对比度、焦点环、文字层级和减少动态效果都应成为发布门槛，而不是视觉验收完成后的附加检查。半透明表面必须与实际背后的图片、视频或业务内容一起判断，不能只在纯色背景上确认。

我的判断是：视觉风格只是增强层，兜底的目标不是复刻每个像素，而是保住速度、可读性和操作确定性；最贵的效果只在能证明收益时启用。