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;
}

使用 clip-path 创建圆形

clip-path 可以通过 circle() 函数直接裁剪出圆形区域，适合复杂形状的裁剪需求。

.circle {
  width: 100px;
  height: 100px;
  clip-path: circle(50% at 50% 50%);
  background-color: #2ecc71;
}

使用 SVG 绘制圆形

SVG 的 <circle> 元素专为绘制圆形设计，适合需要矢量图形的场景。

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

响应式圆形设计

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

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

圆形边框效果

为圆形添加边框时需注意 box-sizing，避免边框导致尺寸溢出。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid #e67e22;
  box-sizing: border-box;
}