css中制作圆圈

使用 border-radius 属性

通过将元素的 border-radius 设置为 50%，可以将一个正方形元素变成圆形。这种方法适用于 div、button 等块级元素。

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

使用 ::before 或 ::after 伪元素

通过伪元素生成圆形，适合在已有元素上添加装饰性圆圈。

.element::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e74c3c;
}

使用 SVG 绘制圆形

SVG 提供原生的圆形绘制功能，适合需要矢量图形的场景。

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

使用 clip-path 裁剪

通过 clip-path 的 circle() 函数直接裁剪出圆形区域，适合复杂形状的裁剪。

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

使用 CSS 渐变生成圆形

通过径向渐变模拟圆形效果，适合需要动态颜色的场景。

.gradient-circle {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #f1c40f 0%, #e67e22 100%);
  border-radius: 50%;
}

使用 aspect-ratio 保持比例

结合 aspect-ratio: 1 确保元素宽高比例一致，避免手动设置宽高。

.ratio-circle {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #1abc9c;
}