css制作圆圈

使用 border-radius 属性

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

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

使用 SVG 绘制圆形

SVG 提供原生圆形绘制功能，通过 <circle> 标签实现。可自定义半径、填充颜色和描边。

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

使用伪元素创建圆形

通过伪元素（如 ::before 或 ::after）生成圆形，适合装饰性元素。需设置伪元素的尺寸和 border-radius。

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

使用 clip-path 裁剪

通过 clip-path 的 circle() 函数直接裁剪出圆形区域。此方法支持复杂形状的裁剪。

.clipped-circle {
  width: 80px;
  height: 80px;
  background-color: #f39c12;
  clip-path: circle(40px at center);
}

动态圆形（CSS 动画）

结合 border-radius 和 CSS 动画，可创建动态效果。例如实现脉冲动画。

.pulse-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #9b59b6;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}