如何使用CSS创造炫酷的数字样式？

/* 创建9x9的网格 */
.grid {
  display: grid;
  grid-template-columns: repeat(9, 1em);
  grid-template-rows: repeat(9, 1em);
  width: 9em;
  height: 9em;
}

/* 设置每个网格元素的背景颜色 */
.grid > * {
  background-color: #ccc;
}

/* 使用nth-child和calc设置数字样式 */
.grid > :nth-child(2n+1) {
  background-color: var(--color);
}

.grid > :nth-child(3n+1) {
  background-color: var(--color);
}

.grid > :nth-child(4n+1) {
  background-color: var(--color);
}

.grid > :nth-child(5n+1) {
  background-color: var(--color);
}

.grid > :nth-child(6n+1) {
  background-color: var(--color);
}

.grid > :nth-child(7n+1) {
  background-color: var(--color);
}

.grid > :nth-child(8n+1) {
  background-color: var(--color);
}

.grid > :nth-child(9n+1) {
  background-color: var(--color);
}

/* 设置不同的数字样式 */
.num0 {
  --color: #000;
}

.num1 {
  --color: #f00;
}

.num2 {
  --color: #0f0;
}

.num3 {
  --color: #00f;
}

.num4 {
  --color: #f0f;
}

.num5 {
  --color: #0ff;
}

.num6 {
  --color: #f0f;
}

.num7 {
  --color: #0f0;
}

.num8 {
  --color: #000;
}

.num9 {
  --color: #f00;
}