css如何制作圆

使用 border-radius 属性

通过设置 border-radius 属性为 50%，可以将元素的四个角全部变为圆角，从而形成圆形。元素的宽度和高度需相同以确保圆形效果。

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

使用 clip-path 属性

clip-path 的 circle() 函数可以直接裁剪元素为圆形，无需依赖宽高比例。

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

使用 SVG 绘制圆形

通过内联 SVG 的 <circle> 标签，可以更灵活地控制圆形的半径、位置和样式。

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

使用伪元素创建圆形

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

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

注意事项

• 使用 border-radius: 50% 时，需确保元素的宽高一致，否则会呈现椭圆形。
• clip-path 的兼容性较新，需检查目标浏览器支持情况。
• SVG 适用于需要复杂图形或动画的场景，但可能增加 DOM 复杂度。