css标准中不存在random()函数，因其声明式、无状态特性要求样式可预测与高效渲染；真随机需用javascript动态设置css自定义属性实现。
random() 函数在标准 CSS 中并不存在 —— 这是关键前提。浏览器原生 CSS 不支持运行时随机计算，所有样式都是确定性、可缓存、可复用的。想靠纯 CSS（比如 width: random(100px, 300px);）直接生成随机值，行不通。
为什么 CSS 没有 random()？
CSS 是声明式、无状态的语言，设计目标是可预测渲染和高效重排重绘。引入真随机函数会破坏样式可复现性（比如打印、截图、服务端渲染）、影响性能（每次重绘都重新计算），也违背层叠与继承机制。目前仅 calc()、clamp()、min()/max() 等静态计算函数被广泛支持。
替代方案：用 JavaScript 动态注入随机样式
真正可行的做法是用 JS 为每个同类元素单独设置随机 CSS 自定义属性（--rand-value），再在 CSS 中引用它。这是当前最轻量、兼容性好、且不依赖构建工具的方式：
示例：为所有 .tile 元素设置随机旋转和偏移
document.querySelectorAll('.tile').forEach(el => {
const rot = (Math.random() - 0.5) * 20; // -10° ~ +10°
const tx = Math.random() * 40 - 20; // -20px ~ +20px
const ty = Math.random() * 40 - 20;
el.style.setProperty('--rand-rot', `${rot}deg`);
el.style.setProperty('--rand-tx', `${tx}px`);
el.style.setProperty('--rand-ty', `${ty}px`);
});
CSS 中使用：
.tile {
transform: rotate(var(--rand-rot)) translate(var(--rand-tx), var(--rand-ty));
}
- 必须用
style.setProperty()（而非直接赋值el.style.--rand-rot），否则无效 - 确保 CSS 变量名带
--前缀，且在 :root 或对应选择器中声明默认值（防未设置时失效） - 若需响应式重随机（如窗口 resize），需手动触发重算，CSS 本身不会监听变化
注意伪类和动画里的“伪随机”陷阱
有人尝试用 :nth-child(an+b) 配合不同 transform 值模拟随机感，例如：
.item:nth-child(3n+1) { opacity: 0.7; }
.item:nth-child(3n+2) { opacity: 0.9; }
.item:nth-child(3n+0) { opacity: 1.0; }
这本质是**固定模式**，不是随机 —— 元素顺序一变，视觉规律立刻暴露。它适合可控网格，但不适用于真正需要不可预测布局的场景（比如粒子效果、手绘风卡片墙）。一旦 DOM 动态增删，视觉节奏就崩了。
真正要实现非规则布局，核心是放弃“CSS 内部随机”的幻想，接受 JS 控制随机种子和时机。最容易被忽略的是：随机值必须绑定到具体 DOM 节点实例，而不是靠 class 批量声明；否则所有同类元素拿到的其实是同一份计算结果（比如误用 getComputedStyle 读取后统一设值）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
