css制作圆圈

使用 border-radius 属性

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

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

使用 aspect-ratio 保持比例

如果希望元素始终为圆形，可以使用 aspect-ratio: 1 确保宽高比始终为 1:1，即使只设置宽度或高度。

.circle {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 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: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #f39c12;
}

使用 clip-path 裁剪

clip-path 可以精确控制元素的显示区域，适合不规则形状或部分圆形效果。

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