使用css制作同心圆

使用 CSS 制作同心圆

同心圆可以通过 CSS 的 border-radius 和 position 属性实现。以下是两种常见方法：

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

通过多个嵌套的 div 元素，设置不同的宽度和高度，并利用 border-radius: 50% 将其变为圆形。外层圆通过 position: relative 定位，内层圆通过 position: absolute 居中。

<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;
}

注意事项

• 确保外层圆的宽度和高度相同，border-radius: 50% 才能生成正圆。
• 使用 transform: translate(-50%, -50%) 实现精准居中。
• 伪元素方法可以减少 HTML 嵌套，但需注意浏览器兼容性。