四个不同颜色的小球使用var在css如何快速实现

可以使用CSS变量（Custom Properties，也称为CSS自定义属性）和伪元素（pseudo-elements）来实现四个不同颜色的小球。具体实现步骤如下：

1. 在根选择器（:root）中定义四个不同颜色的CSS变量：

:root {
  --color-1: #ff6b6b;
  --color-2: #70c1b3;
  --color-3: #feca57;
  --color-4: #ff9ff3;
}

2. 通过伪元素（::before或::after）来创建四个小球，并为每个小球指定不同的CSS变量作为背景色：

.ball {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.ball::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-1);
}

.ball::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
}

这样就实现了四个不同颜色的小球，每个小球都有一个不同的CSS变量作为背景色。你可以根据需要调整每个小球的样式和位置。