css如何制作圆

使用 border-radius 属性制作圆

通过设置 border-radius 属性为元素添加圆角效果。当 border-radius 的值等于元素宽度和高度的一半时，元素会呈现圆形。

.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）结合 border-radius 创建圆形。

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

使用 aspect-ratio 保持圆形比例

结合 aspect-ratio 属性确保元素在动态调整大小时保持圆形。

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