使用css制作同心圆

使用CSS制作同心圆

同心圆可以通过CSS的border-radius属性和嵌套元素实现。以下是几种常见方法：

方法一：嵌套div实现同心圆

通过多个嵌套的div元素，设置不同的宽高和border-radius，并利用绝对定位居中。

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

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

.inner-circle {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法二：使用伪元素

通过单个元素结合::before或::after伪元素生成同心圆，减少HTML结构。

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

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

.circle::before {
  content: '';
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法三：利用box-shadow

通过box-shadow属性在单个元素上叠加多个同心圆，适合简单场景。

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

.shadow-circle {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%;
  box-shadow: 0 0 0 50px #3498db;
}

方法四：SVG替代方案

若需更复杂的同心圆效果，可以使用SVG实现。

<svg width="200" height="200">
  <circle cx="100" cy="100" r="100" fill="#3498db" />
  <circle cx="100" cy="100" r="50" fill="#e74c3c" />
</svg>

注意事项

• 定位时需确保父元素设置position: relative，子元素使用absolute定位。
• transform: translate(-50%, -50%)用于精确居中。
• box-shadow方法中，颜色和扩展半径需根据需求调整。