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%);
  background-color: #e74c3c;
}

使用 SVG 实现圆形

SVG 原生支持圆形绘制，适合需要矢量图形的场景。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="#2ecc71" />
</svg>

通过伪元素创建圆形

利用 ::before 或 ::after 伪元素生成圆形，适合动态内容或装饰性元素。

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

响应式圆形设计

结合百分比单位或 vw/vh，实现圆形随容器大小自适应。

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