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 {
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #e74c3c;
}

使用伪元素创建圆形

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

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

圆形边框与渐变结合

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

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

SVG 实现圆形

使用 SVG 的 <circle> 标签创建矢量圆形，适合需要缩放或动画的场景。

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

圆形裁剪（clip-path）

通过 clip-path 的 circle() 函数裁剪任意元素为圆形，支持非正方形元素。

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