当前位置：首页 > CSS

使用css制作同心圆

2026-01-08 20:22:43CSS

使用 CSS 制作同心圆

同心圆可以通过嵌套多个圆形元素并利用 CSS 的定位和样式属性实现。以下是几种常见方法：

方法一：使用绝对定位和多个 div

通过嵌套多个 div 元素，设置相同的圆心位置，但不同的半径和边框样式：

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

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

.circle {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.outer {
  width: 200px;
  height: 200px;
  background: #ff6b6b;
}

.middle {
  width: 120px;
  height: 120px;
  background: #4ecdc4;
}

.inner {
  width: 60px;
  height: 60px;
  background: #ffe66d;
}

方法二：使用伪元素

通过单个元素和其伪元素创建同心圆，减少 HTML 结构：

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

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

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

.concentric-circle::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  background: #ffe66d;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法三：使用边框和阴影

通过边框和阴影叠加实现同心圆效果：

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

.border-circle {
  width: 60px;
  height: 60px;
  background: #ffe66d;
  border-radius: 50%;
  border: 30px solid #4ecdc4;
  box-shadow: 0 0 0 20px #ff6b6b;
  position: relative;
}

方法四：使用 SVG

SVG 是绘制图形的理想选择，代码简洁且易于控制：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="#ff6b6b" />
  <circle cx="100" cy="100" r="50" fill="#4ecdc4" />
  <circle cx="100" cy="100" r="20" fill="#ffe66d" />
</svg>