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

使用 SVG 创建圆形

SVG 提供原生圆形绘制能力，通过 <circle> 标签可精确控制半径和位置。适合需要矢量图形的场景。

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

通过伪元素生成圆形

利用 ::before 或 ::after 伪元素生成圆形，避免额外 HTML 标签。需设置伪元素为块级元素并定义尺寸。

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

动态调整圆形大小

使用 CSS 变量或 calc() 函数实现动态尺寸，结合 vw/vh 单位可创建响应式圆形。

.circle {
  --size: 10vmin;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-color: #9b59b6;
}