css 制作圆圈

使用 border-radius 制作圆圈

通过将元素的 border-radius 设置为 50%，可以将正方形元素变为圆形。需确保元素的宽度和高度相等。

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

使用伪元素创建圆圈

通过伪元素（如 ::before 或 ::after）生成圆形，适用于动态内容或装饰性元素。

.element::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e74c3c;
}

使用 SVG 绘制圆圈

SVG 提供原生圆形绘制功能，适合需要矢量缩放或复杂效果的场景。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#2ecc71" />
</svg>

通过 clip-path 裁剪为圆形

使用 clip-path 的 circle() 函数直接裁剪元素为圆形，支持动态调整半径和位置。

.clipped-circle {
  width: 120px;
  height: 120px;
  background-color: #9b59b6;
  clip-path: circle(50% at 50% 50%);
}

响应式圆圈的实现

结合百分比单位或 vw/vh 实现随容器大小变化的圆形。

.responsive-circle {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: #f1c40f;
}