css如何制作圆

使用 border-radius 属性

通过设置 border-radius 属性可以轻松创建圆角或圆形元素。值为 50% 时，元素会呈现为圆形。

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

圆形按钮

结合 border-radius 和 padding 可以制作圆形按钮，适合交互场景。

.round-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: green;
  color: white;
  border: none;
  cursor: pointer;
}

圆形头像

圆形头像通常通过裁剪正方形图片实现，结合 overflow: hidden 确保内容适配圆形边界。

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

动态圆形进度条

通过 clip-path 或 SVG 可以实现动态圆形进度条，常用于数据可视化。

.progress-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(red 0%, transparent 0%);
  clip-path: circle(50% at center);
}

圆形边框与阴影

为圆形元素添加边框或阴影时，需确保 border-radius 覆盖整个元素，避免变形。

.circle-shadow {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 3px solid #ff5722;
}