css圆怎么制作

使用 border-radius 属性

将元素的 border-radius 设置为 50%，可以将方形元素变为圆形。适用于 div、button 等块级元素。

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

通过 SVG 绘制圆形

SVG 的 <circle> 标签可直接定义圆形，适合需要矢量图形的场景。

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

使用伪元素创建圆形

通过 ::before 或 ::after 伪元素生成圆形，无需额外 HTML 标签。

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

利用 clip-path 裁剪

clip-path 的 circle() 函数可精确裁剪出圆形区域，支持复杂形状控制。

.clip-circle {
  width: 80px;
  height: 80px;
  background-color: #feca57;
  clip-path: circle(40px at center);
}

响应式圆形设计

结合百分比或 vw/vh 单位实现自适应圆形，适配不同屏幕尺寸。

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

圆形边框与阴影效果

通过 box-shadow 和 border 增强圆形视觉表现。

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