css 制作圆圈

使用CSS制作圆圈的方法

方法1：使用border-radius属性

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

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

方法2：使用clip-path属性

clip-path可以裁剪元素为圆形，但兼容性略低于border-radius。

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

方法3：使用SVG内联

直接在HTML中使用SVG绘制圆形，适合需要复杂图形控制的场景。

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

方法4：伪元素创建

通过伪元素结合border-radius实现，适合需要动态内容叠加的场景。

.circle-container::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #9b59b6;
}

注意事项

• 确保父容器有足够空间显示完整圆形
• 使用box-sizing: border-box时需调整内边距和边框
• 动态调整大小时建议使用百分比或视窗单位保持比例