探索 CSS random() 函数：从原理到实战

背景

CSS 正在引入一个名为 random() 的新函数，它允许开发者在设置样式属性时直接使用随机值。这一功能为创建有趣、动态且具有创意的设计、图案和背景效果提供了全新的可能性。

目前，该功能的支持情况如下：

• Polypane 29+：可用于测试。
• Chromium 148+：在启用实验性 Web 功能标志（experimental web features flag）后支持。
• Safari 26.2+：支持 random()，但对文章中展示的部分演示效果支持不完全。
• Firefox：目前尚不支持。

需要注意的是，浏览器的实现仍在进行中，这也是该功能目前仍处于实验阶段的原因。由于实现细节在不同版本（如 Chromium 148、149、150）之间有所演变，部分演示在 Safari 中可能表现不佳，且未来随着规范完善，某些示例可能需要调整。

核心内容

作者通过构建“散景（Bokeh）”效果——一种模拟摄影中失焦光斑的视觉效果，详细演示了 random() 函数的用法、陷阱及解决方案。散景效果的核心要素包括圆形的位置、大小、颜色、模糊程度以及动画变化。

1. 基础用法：随机位置

最简单的方式是在 left 和 top 属性中直接使用 random()。该函数接受最小值和最大值，并返回两者之间的随机值。

.bokeh {
  position: absolute;
  left: random(0%, 100%);
  top: random(0%, 100%);
  border-radius: 100%;
}

注意：最小值和最大值的单位必须一致。例如 random(0, 100%) 是无效的，因为 0 是 <number> 类型，而 100% 是 <percentage> 类型，必须写成 random(0%, 100%)。

2. 关键挑战：自定义属性中的随机值一致性

在设置圆形大小时，需要确保 width 和 height 使用相同的随机值，以保持圆形不变形。作者最初尝试将随机值存储在 CSS 自定义属性中：

.bokeh {
  --size: random(50px, 20vmin);
  width: var(--size);
  height: var(--size);
}

然而，这导致了 width 和 height 的值不同。这是因为当自定义属性被多次引用时，random() 每次都会生成一个新的随机值，而不是在声明时生成一次并复用。

解决方案：使用 element-scoped 关键字。

.bokeh {
  --size: random(element-scoped, 50px, 20vmin);
  width: var(--size);
  height: var(--size);
}

element-scoped 告诉浏览器为每个元素生成一个随机值，并在该元素的所有属性中复用此值。 注：element-scoped 并非最终规范名称，未来可能更名为 per-element，目前尚未收录于 MDN 文档，但已有相关 PR 提交。

3. 位置优化：防止溢出

如果圆形随机位置靠近容器边缘且尺寸较大，会导致溢出并产生滚动条。解决方案是使用 calc() 结合自定义属性来限制随机范围：

.bokeh {
  left: random(0%, calc(100% - var(--size)));
  top: random(0%, calc(100% - var(--size)));
  --size: random(element-scoped, 50px, 20vmin);
  width: var(--size);
  height: var(--size);
}

由于 --size 在同一个元素内是固定的，这样可以确保圆形始终完全位于容器内部。

4. 颜色与透明度

为了模拟真实的散景效果，圆形应具有相似的亮度和饱和度，但色相（Hue）不同。同时，透明度也应随机变化以模拟景深差异。

.bokeh {
  background: hsl(random(0, 360) 80% 50%);
  opacity: random(0.1, 1);
}

• HSL 色相：是一个数值，无需单位。
• 透明度：也是数值，无需单位。

5. 模糊与混合模式

为了模拟失焦效果，使用 filter: blur() 和 contrast()。此外，使用 mix-blend-mode: plus-lighter 可以让重叠的圆形亮度叠加，更接近真实的光斑效果。

.bokeh {
  filter: blur(random(2px, 6px)) contrast(random(50%, 200%));
  mix-blend-mode: plus-lighter;
}

• 模糊范围：2px 到 6px。
• 对比度范围：特意选择 50% 到 200%。大部分随机值会使对比度增强（100%-200%），少数值会降低对比度（50%-100%），从而增加视觉层次感。

6. 动画效果

通过简单的脉冲动画，模拟相机对焦变化时光斑大小和清晰度的动态变化。虽然原文在此处截断，但核心逻辑是利用 CSS 动画结合上述随机属性，创造出随时间变化的动态背景。

关键要点

• random() 的基本语法：random(min, max)，返回指定范围内的随机值，单位需保持一致。
• 自定义属性的陷阱：直接在自定义属性中赋值 random() 会导致每次引用都生成新值。
• element-scoped 关键字：用于确保随机值在单个元素的所有属性中保持一致（如同时用于 width 和 height）。未来可能更名为 per-element。
• 防止布局溢出：结合 calc() 和自定义属性动态计算随机范围，确保元素不超出容器边界。
• 视觉增强技巧：
  • 使用 hsl() 的 random() 色相值保持色调统一但色彩各异。
  • 结合 filter: blur() 和 contrast() 模拟景深。
  • 使用 mix-blend-mode: plus-lighter 实现光斑叠加发光效果。
• 浏览器支持现状：Chromium 148+（需开启实验标志）、Safari 26.2+、Polypane 29+ 支持，Firefox 暂不支持。实现仍在演进中，示例代码可能需要随规范更新而调整。

意义与影响

CSS random() 函数的引入标志着前端设计从“静态确定性”向“动态随机性”迈出了重要一步。

1. 设计自由度的提升：开发者无需依赖 JavaScript 或预处理器生成大量静态类名，即可在 CSS 层面实现复杂的随机图案、背景纹理和动态效果。这极大地简化了代码结构，提高了维护性。
2. 性能优化潜力：虽然 random() 目前主要用于视觉效果，但其原生支持意味着浏览器引擎可以更高效地处理随机样式计算，相比 JS 动态生成样式可能带来更好的渲染性能。
3. 实验性规范的演进：该功能仍处于实验阶段，特别是 element-scoped 等关键字的命名和实现细节仍在讨论中。这为社区提供了参与标准制定的机会，同时也提醒开发者在生产环境中使用时需谨慎，做好降级处理。
4. 创意开发的工具库：如散景效果所示，random() 可以结合现有的 CSS 特性（如 filter、mix-blend-mode、calc()）创造出以前难以实现或实现成本极高的视觉效果，丰富了 Web 设计的表现力。

总之，random() 是 CSS 迈向更智能、更动态样式系统的重要里程碑，尽管目前尚需浏览器厂商和社区的共同打磨，但其展现出的潜力令人期待