css制作圆心

使用 border-radius 属性

将元素的 border-radius 设置为 50%，可以将方形元素变为圆形。需要确保元素的宽度和高度相等。

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

使用 aspect-ratio 保持比例

如果希望圆形自适应容器大小，可以结合 aspect-ratio: 1 确保宽高比始终为 1:1。

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

使用伪元素创建动态圆心

通过伪元素（如 ::before 或 ::after）可以在圆心添加标记或装饰。

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: green;
  position: relative;
}

.circle::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 SVG 绘制圆形

SVG 提供更灵活的图形控制，适合复杂场景。

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

注意事项

• 确保父容器有足够的空间，避免圆形被裁剪。
• 使用 box-shadow 或 filter 可以为圆形添加阴影或特效。
• 对于响应式设计，建议使用百分比或 vw/vh 单位。