css圆怎么制作

使用 border-radius 属性制作圆形

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

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

使用 clip-path 创建圆形

clip-path 允许通过路径裁剪元素形状。使用 circle() 函数可定义圆形区域。

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

使用 SVG 绘制圆形

SVG 提供原生圆形绘制支持，适合复杂图形或动态效果。

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

使用伪元素生成圆形

通过 ::before 或 ::after 伪元素创建圆形，适用于装饰性元素。

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

响应式圆形设计

结合百分比或 vw/vh 单位实现自适应圆形。

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