random(): CSS 原生掷骰子
撒一片星空、给照片墙加点歪斜、让派对彩带各落各处——过去这些「随机感」必须靠 JS 或构建期预生成。random(min, max, step?) 把骰子交给了 CSS 本身：min 和 max 圈定范围（单位要同类），可选的 step 让结果落在步距倍数上。
1 · 星空：一行 JS 都不用写
值是稳定的，不会每帧重新生成： 随机值按「元素 × 属性」生成后即缓存——hover、修改其他属性、重排都不会让星星移位。因此它能放进 @keyframes 作为终点值：WebKit 的演示用
rotate: random(0.25turn, 8turn) 做了一个每次点击都停在不同位置的抽奖转盘。需要可复现（SSR / 截图测试）时还能固定种子: random(fixed 0.5, 0px, 100px) 恒等于 50px。
2 · 关键点：随机值由谁共享
「每处使用各自取值」只是默认。想让 width 和 height 取同一个随机数（保持正方形），直觉是存进自定义属性再 var() 两次——无效: var() 是文本代换,
这串文本被复制到两处，各自再取一次。为此 random() 把「共享键」放进了第一个参数：--ident 控制跨属性共享、element-shared 控制跨元素共享，2×2 恰好四种语义（下面是 JS 按规则模拟的演示，每格三个元素、各有 w / h 两个属性）：
现状提醒： random() 目前只在 Safari（Technology Preview 起）落地，规范在 CSS Values 5, CSSWG 仍有未决议题——语法可能再变。渐进增强照旧：@supports (width: random(1px, 2px)) { … }，本页星空就是这么切换真 CSS / JS 模拟的。
3 · 🔗 相关链接
- Rolling the dice with CSS random() · webkit.org——本页主要来源：WebKit 团队的设计解读与星空 / 照片堆 / 幸运转盘演示。
- random() · developer.mozilla.org——形式语法：random-key（ident / element-shared / fixed 种子）与 step 参数。