css制作圆形

使用 border-radius 属性制作圆形

通过将元素的 border-radius 属性设置为 50%，可以将正方形元素变为圆形。这是最常用的方法。

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

使用 clip-path 属性制作圆形

clip-path 属性可以通过裁剪元素来创建圆形，适用于非正方形元素。

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

使用 SVG 制作圆形

SVG 原生支持圆形绘制，适合需要复杂图形或动画的场景。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="green" />
</svg>

使用伪元素制作圆形

通过伪元素（如 ::before 或 ::after）可以动态生成圆形，无需额外 HTML 结构。

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

使用 aspect-ratio 保持圆形比例

结合 aspect-ratio 属性可以确保圆形在不同尺寸下保持比例。

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

注意事项

• 使用 border-radius: 50% 时，元素的宽度和高度必须相等，否则会变成椭圆形。
• clip-path 的兼容性较新，需检查目标浏览器支持情况。
• SVG 方法适合静态图形或需要矢量缩放的情况。