目前在纯CSS中还没有办法做到这一点，但是如果你使用的是CSS预处理器，比如LESS，那么你可以这样做：

@randomMargin: `Math.round(Math.random() * 100)`;

div {
  margin-left: ~'@{randomMargin}px';
}

这是因为LESS will evaluate JavaScript expressions。
如果你想把它分解成一个随机的mixin/函数，你可以用途：

.random(@min, @max) {
  @random: `Math.round(Math.random() * (@{max} - @{min}) + @{min})`;
}

div {
  .random(-100, 100);
  margin-left: ~'@{random}px';
}

每次编译时都会使用不同的margin-left值：

div {
  margin-left: 18px;
}

然而，我不确定这在生产环境中有多实用，因为你的CSS * 应该 * 已经被编译/缩小了，而不是在运行中编译。因此，你应该直接使用JavaScript来实现这一点。

不要认为CSS有这种能力，但LESS会有所帮助
http://csspre.com/random-numbers/

您可以使用JavaScript将随机数设置为CSS属性：

let el = document.getElementById('foo');
el.style.setProperty('--rand', Math.random());

然后你可以在CSS中使用这个随机数，例如一个随机颜色：

#foo {
  --rand: 0.5; /* will be a random number from 0 to 1 set by javascript */
  --hue: calc(255 * var(--rand));
  background-color: hsl(var(--hue), 67%, 57%);
}

或一个随机的绿色阴影：

#foo {
  --rand: 0.5; /* will be a random number from 0 to 1 set by javascript */
  --greenHue: calc(70 + (30 * var(--rand)));
  --greenSaturation: calc(50% + (30% * var(--rand)));
  --greenLevel: calc(25% + (5% * var(--rand)));
  background-color: hsl(var(--greenHue), var(--greenSaturation), var(--greenLevel));greenLevel));
}

要获得更多变化，请设置多个随机数变量。记住变量是继承的。它们可以用于关键帧动画等。