用css制作圆形

使用 border-radius 属性

通过设置 border-radius 为 50%，可以将一个正方形元素变为圆形。元素的宽度和高度必须相等。

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

使用 aspect-ratio 确保宽高比

如果希望元素动态调整大小但仍保持圆形，可以结合 aspect-ratio 属性确保宽高比为 1/1。

.circle {
  width: 50%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: red;
}

使用 clip-path 创建圆形

clip-path 可以通过 circle() 函数直接裁剪出圆形区域，适合更复杂的图形需求。

.circle {
  width: 150px;
  height: 150px;
  clip-path: circle(50% at center);
  background-color: green;
}

使用伪元素生成圆形

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

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

响应式圆形设计

结合百分比单位和 vw/vh 单位，可以创建适应不同屏幕尺寸的圆形。

.responsive-circle {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: purple;
}