如何使用CSS绘制同心圆（在一个圆形内部嵌套另一个圆形）

开发者阿泽

2026-10-2

CSS实现同心圆的两种常用方案

方案1：嵌套元素+定位实现（适配你已掌握的`position: absolute`基础）

实现逻辑：

给外层容器设置position: relative，作为子元素绝对定位的参照
两个圆形元素都设置position: absolute，通过居中属性保证两个圆的圆心完全重合

代码示例：

<!-- HTML结构 -->
<div class="circle-wrap">
  <div class="outer-circle"></div>
  <div class="inner-circle"></div>
</div>

/* CSS代码 */
.circle-wrap {
  position: relative;
  width: 300px;
  height: 300px;
}
.outer-circle, .inner-circle {
  position: absolute;
  border-radius: 50%;
  /* 通用居中代码，修改宽高后无需手动调整位置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.outer-circle {
  width: 300px;
  height: 300px;
  background-color: #165DFF;
}
.inner-circle {
  width: 180px;
  height: 180px;
  background-color: #fff;
}

补充说明：
如果你的圆形宽高都是固定值，也可以直接给内圆设置固定的`top`和`left`值，比如上面的示例直接写`top: 60px; left: 60px`也能实现效果，不需要用transform属性。

方案2：单元素+box-shadow实现（更简洁，无需多个子元素）

实现逻辑：仅用一个基础圆形，通过box-shadow的扩展半径属性向内/向外生成多层环形，实现同心圆效果，适合需要多层同心圆的场景。
代码示例：

<!-- HTML结构，仅需一个元素 -->
<div class="multi-circle"></div>

/* CSS代码 */
.multi-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #fff;
  /* 每层阴影对应一层圆环，可无限叠加 */
  box-shadow: 0 0 0 40px #165DFF, 0 0 0 80px #E8F3FF;
}