css制作圆形

使用 border-radius 属性

通过设置 border-radius 为 50%，可以将元素变为圆形。此方法适用于正方形元素，确保宽度和高度相等。

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

使用 clip-path 属性

clip-path 可以通过圆形路径裁剪元素，直接生成圆形。此方法适用于任何形状的元素，但兼容性稍差。

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

使用 SVG 绘制圆形

通过内联 SVG 代码，可以直接绘制一个圆形。适合需要复杂图形或动态效果的场景。

<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 确保比例

现代 CSS 的 aspect-ratio 属性可以强制元素保持宽高比例，避免手动设置宽度和高度。

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

注意事项

• 使用 border-radius 时，确保元素的宽度和高度一致，否则会生成椭圆形。
• clip-path 的兼容性较差，需检查目标浏览器支持情况。
• SVG 方法适合静态图形，但灵活性较高。