css制作圆心

使用 border-radius 创建圆形

将元素的 width 和 height 设置为相同的值，并将 border-radius 设为 50%。这会强制元素呈现圆形。

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

使用 aspect-ratio 保持比例

通过 aspect-ratio: 1 确保宽高比为 1:1，结合 border-radius: 50% 实现圆形。

.circle {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #e74c3c;
}

使用伪元素创建动态圆形

通过伪元素（如 ::before 或 ::after）生成圆形，适合动态内容或装饰性元素。

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

结合 clip-path 精确裁剪

使用 clip-path 的 circle() 函数直接定义圆形区域，适合复杂形状组合。

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

响应式圆形设计

通过 vw 或 % 单位实现圆形随视口大小变化。

.circle {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: #f1c40f;
}

使用 SVG 创建圆形

通过内联 SVG 实现矢量圆形，适合需要缩放或动画的场景。

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

圆形边框效果

通过 border 属性添加环形边框，结合透明背景。

.circle-border {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 5px solid #e67e22;
  background-color: transparent;
}

渐变填充圆形

使用 radial-gradient 背景创建渐变填充的圆形。

.gradient-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, #3498db, #2980b9);
}