css圆怎么制作

使用 border-radius 属性

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

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

使用 SVG 绘制圆形

SVG 提供 <circle> 标签直接绘制圆形，通过 cx、cy 设置圆心，r 设置半径。

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

使用伪元素和绝对定位

通过伪元素生成圆形，适合需要动态叠加效果的场景。

.circle-pseudo {
  position: relative;
  width: 80px;
  height: 80px;
}
.circle-pseudo::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #2ecc71;
}

使用 clip-path 属性

通过 clip-path 的 circle() 函数裁剪出圆形区域，支持复杂形状组合。

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

渐变圆形效果

结合 border-radius 和 background 渐变，实现色彩过渡的圆形。

.gradient-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1abc9c, #f1c40f);
}