当前位置：首页 > CSS

使用css制作同心圆

2026-02-27 02:04:29CSS

使用CSS制作同心圆

同心圆可以通过CSS的border-radius和position属性实现，核心思路是利用多个嵌套的div元素，设置相同的圆心但不同的半径。

方法一：使用多个嵌套元素

创建多个div，通过绝对定位和border-radius: 50%实现同心圆效果。

<div class="circle-container">
  <div class="circle-outer">
    <div class="circle-middle">
      <div class="circle-inner"></div>
    </div>
  </div>
</div>

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

.circle-outer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #3498db;
  border-radius: 50%;
}

.circle-middle {
  position: absolute;
  width: 66%;
  height: 66%;
  background-color: #e74c3c;
  border-radius: 50%;
  top: 17%;
  left: 17%;
}

.circle-inner {
  position: absolute;
  width: 33%;
  height: 33%;
  background-color: #2ecc71;
  border-radius: 50%;
  top: 33%;
  left: 33%;
}

方法二：使用伪元素

通过单个元素和其伪元素（::before、::after）减少HTML结构。

<div class="concentric-circle"></div>

.concentric-circle {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #3498db;
  border-radius: 50%;
}

.concentric-circle::before {
  content: '';
  position: absolute;
  width: 66%;
  height: 66%;
  background-color: #e74c3c;
  border-radius: 50%;
  top: 17%;
  left: 17%;
}

.concentric-circle::after {
  content: '';
  position: absolute;
  width: 33%;
  height: 33%;
  background-color: #2ecc71;
  border-radius: 50%;
  top: 33%;
  left: 33%;
}

方法三：使用CSS变量

通过CSS变量统一控制圆心和半径，便于调整。

:root {
  --circle-size: 200px;
  --color-outer: #3498db;
  --color-middle: #e74c3c;
  --color-inner: #2ecc71;
}

.circle-var {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  background-color: var(--color-outer);
  border-radius: 50%;
}

.circle-var::before {
  content: '';
  position: absolute;
  width: calc(var(--circle-size) * 0.66);
  height: calc(var(--circle-size) * 0.66);
  background-color: var(--color-middle);
  border-radius: 50%;
  top: 17%;
  left: 17%;
}

.circle-var::after {
  content: '';
  position: absolute;
  width: calc(var(--circle-size) * 0.33);
  height: calc(var(--circle-size) * 0.33);
  background-color: var(--color-inner);
  border-radius: 50%;
  top: 33%;
  left: 33%;
}