css十个从小到大的同心圆

要创建十个从小到大的同心圆，你可以使用 CSS 的伪元素 `::before` 和 `::after` 结合 `transform` 属性来实现。以下是一个示例的 CSS 代码：

.container {
  position: relative;
  width: 300px;
  height: 300px;
}

.circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.circle::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border: 2px solid #000;
  border-radius: 50%;
}

.circle:nth-child(1)::before {
  transform: scale(0.1);
}

.circle:nth-child(2)::before {
  transform: scale(0.2);
}

.circle:nth-child(3)::before {
  transform: scale(0.3);
}

.circle:nth-child(4)::before {
  transform: scale(0.4);
}

.circle:nth-child(5)::before {
  transform: scale(0.5);
}

.circle:nth-child(6)::before {
  transform: scale(0.6);
}

.circle:nth-child(7)::before {
  transform: scale(0.7);
}

.circle:nth-child(8)::before {
  transform: scale(0.8);
}

.circle:nth-child(9)::before {
  transform: scale(0.9);
}

.circle:nth-child(10)::before {
  transform: scale(1);
}

在 HTML 中，你可以使用以下代码来应用该样式：

<div class="container">
  <div class="circle"></div>
</div>

以上代码将在 `.container` 元素内创建十个从小到大的同心圆，每个圆的大小比前一个圆大一倍。你可以根据需要调整容器的宽度、高度以及圆形的样式来自定义效果。