css 制作圆形

使用 border-radius 属性制作圆形

将元素的 border-radius 设置为 50%，可以将正方形元素变为圆形。此方法要求元素的宽度和高度相等。

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

使用 clip-path 制作圆形

clip-path 可以直接裁剪元素为圆形，适用于任何形状的元素，但兼容性较 border-radius 稍差。

.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 伪元素生成圆形，适用于动态内容或装饰性元素。

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

注意事项

• 使用 border-radius 时，确保元素的 width 和 height 相同，否则会变成椭圆形。
• clip-path 在某些旧浏览器（如 IE）中不受支持，需谨慎使用。
• SVG 圆形适用于需要矢量图形的场景，如可缩放图标或动画。