当前位置：首页 > CSS

使用css制作同心圆

2026-02-12 17:26:42CSS

使用 CSS 制作同心圆的方法

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

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

通过嵌套多个 div 元素，并为每个 div 设置不同的宽度、高度和边框样式，可以创建同心圆效果。

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

.outer-circle {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.middle-circle {
  width: 150px;
  height: 150px;
  border: 2px solid red;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner-circle {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  border-radius: 50%;
}

方法二：使用伪元素

通过 ::before 或 ::after 伪元素，可以在单个元素上叠加多个圆形。

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

.concentric-circle {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  border-radius: 50%;
  position: relative;
}

.concentric-circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border: 2px solid red;
  border-radius: 50%;
}

.concentric-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  border-radius: 50%;
}

方法三：使用 box-shadow

通过 box-shadow 属性可以在一个元素上创建多个同心圆效果。

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

.circle-shadow {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: blue;
  box-shadow: 
    0 0 0 20px red,
    0 0 0 40px black;
}

方法四：使用 SVG

SVG 可以更灵活地绘制同心圆，并且支持更多的样式和动画效果。

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" stroke="black" stroke-width="2" fill="none" />
  <circle cx="100" cy="100" r="60" stroke="red" stroke-width="2" fill="none" />
  <circle cx="100" cy="100" r="40" stroke="blue" stroke-width="2" fill="none" />
</svg>

以上方法可以根据实际需求选择使用，嵌套 div 和伪元素适合简单的同心圆效果，而 box-shadow 和 SVG 则适合更复杂的场景。

使用css制作同心圆