css制作圆圈1

使用 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;
}

使用 clip-path 裁剪为圆形

通过 clip-path 的 circle() 函数直接裁剪元素，支持复杂形状控制。

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

结合 SVG 创建圆圈

使用 SVG 的 <circle> 标签绘制精确的圆形，适合需要矢量图形的场景。

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

动态调整圆圈大小

通过 CSS 变量或 JavaScript 动态控制圆圈的尺寸和颜色。

.dynamic-circle {
  --size: 80px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-color: var(--circle-color, #f39c12);
}