css 制作圆形

使用 border-radius 属性

通过设置 border-radius: 50% 可以将元素变为圆形。元素的宽度和高度需相等，否则会显示为椭圆。

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

使用 clip-path 属性

clip-path 可以通过 circle() 函数直接裁剪出圆形区域。

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

使用 SVG 实现

通过内联 SVG 的 <circle> 标签绘制圆形，适合需要复杂图形或动画的场景。

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

使用伪元素

通过 ::before 或 ::after 伪元素生成圆形，适合装饰性元素。

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

动态圆形（结合动画）

通过 border-radius 和动画属性实现动态效果，如加载指示器。

.spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top-color: #9b59b6;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}