html - 使用CSS在彼此内部创建4个圆圈

Question

我正在尝试使用 CSS 将 4 个圆圈(没有背景颜色，只有边框颜色)与最后一个圆圈内的文本放在一起。

示例:http://imgur.com/a/5vUKI

知道如何做到这一点吗？

Answer 1

给你。这应该可以帮助您入门。

.circle {
  border-radius: 50%;
  background: transparent;
  border: 2px solid red;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c2 {
  width: 400px;
  height: 400px;
  border-color: blue;
}

.c3 {
  width: 300px;
  height: 300px;
  border-color: yellow;
}

.c4 {
  width: 200px;
  height: 200px;
}

<div class="circles">

  <div class="circle c1">
    <div class="circle c2">
      <div class="circle c3">
        <div class="circle c4"></div>
      </div>
    </div>
  </div>

</div>