用css制作圆形

使用 border-radius 属性

通过将元素的 border-radius 设置为 50%，可以将正方形或长方形元素变为圆形。元素的宽度和高度必须相等才能形成完美圆形。

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

使用 aspect-ratio 确保比例

如果希望圆形适应内容但保持比例，可以结合 aspect-ratio: 1 确保宽高比为 1:1。

.circle {
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #e74c3c;
  padding: 20px; /* 内容内边距 */
}

使用 SVG 绘制圆形

SVG 提供原生圆形绘制能力，适合需要复杂图形或动画的场景。

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

使用伪元素创建圆形

通过伪元素（如 ::before 或 ::after）生成圆形，无需额外 HTML 标签。

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

圆形边框与渐变

为圆形添加边框或渐变效果，增强视觉表现。

.gradient-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #333;
  background: linear-gradient(45deg, #9b59b6, #1abc9c);
}

响应式圆形

通过百分比单位或 vw/vh 单位实现圆形随容器或视口大小变化。

.responsive-circle {
  width: 20vw;
  height: 20vw;
  max-width: 200px;
  max-height: 200px;
  border-radius: 50%;
  background-color: #34495e;
}