css 制作圆圈

使用 border-radius 创建圆圈

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

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

使用 clip-path 定义圆形

clip-path 的 circle() 函数可直接裁剪元素为圆形，无需依赖宽高比例。

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

通过 SVG 实现圆圈

SVG 的 <circle> 元素专为绘制圆形设计，支持精确控制半径和位置。

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

使用伪元素生成圆圈

通过伪元素（如 ::before 或 ::after）动态创建圆形，适合装饰性元素。

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

注意事项

• 确保父容器有足够空间，避免圆形被裁剪。
• 若需边框，使用 border 属性并调整 box-sizing 以维持尺寸。
• 对于响应式设计，可使用百分比或 vw/vh 单位定义宽高。