css怎么制作圆圈

使用 border-radius 属性制作圆圈

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

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

使用 clip-path 制作圆圈

clip-path 属性可以通过圆形路径裁剪元素，适合不规则形状的裁剪。

.circle {
  width: 100px;
  height: 100px;
  clip-path: circle(50%);
  background-color: red;
}

使用 SVG 绘制圆圈

SVG 是矢量图形格式，直接使用 <circle> 元素可以绘制完美的圆形。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="green" />
</svg>

使用伪元素创建圆圈

通过 ::before 或 ::after 伪元素生成圆形装饰。

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

动态调整圆圈大小

结合 CSS 变量实现动态调整圆的大小。

.circle {
  --size: 80px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-color: purple;
}