css制作圆心

使用 border-radius 属性制作圆形

将元素的 width 和 height 设置为相同的值，并将 border-radius 设置为 50%。这会创建一个完美的圆形。

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

使用 aspect-ratio 属性确保宽高比

如果希望圆形的尺寸更灵活，可以使用 aspect-ratio: 1 来确保宽高比为 1:1，再结合 border-radius: 50%。

.circle {
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: red;
}

使用伪元素创建圆形

通过 ::before 或 ::after 伪元素生成圆形，适用于需要动态添加圆形效果的场景。

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

使用 SVG 绘制圆形

如果需要更复杂的圆形效果（如渐变或描边），可以直接使用 SVG 的 <circle> 元素。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="yellow" stroke="black" stroke-width="2"/>
</svg>

使用 clip-path 创建圆形

通过 clip-path 的 circle() 函数裁剪元素为圆形，适合不规则形状的裁剪。

.clipped-circle {
  width: 120px;
  height: 120px;
  background-color: purple;
  clip-path: circle(50% at 50% 50%);
}