用css制作圆形

使用 border-radius 属性

通过将 border-radius 设置为 50%，可以将一个正方形元素变为圆形。需要确保元素的宽度和高度相等。

.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> 元素生成圆形背景，可以作为 CSS 的背景图像。

.circle {
  width: 100px;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="%232ecc71"/></svg>');
}

使用伪元素

通过伪元素（如 ::before 或 ::after）生成圆形，适合动态内容或装饰性元素。

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

响应式圆形

通过 padding-bottom 和百分比宽度实现响应式圆形，确保圆形在不同屏幕尺寸下保持比例。

.circle {
  width: 20%;
  padding-bottom: 20%;
  border-radius: 50%;
  background-color: #f1c40f;
}