如何用CSS画一个圆

CSS 是网页设计中的一个强大工具，它不仅能处理布局，还可以用来绘制各种形状，包括圆形。

无论是制作按钮、图标还是装饰元素，圆形都是一个常见的需求。本文将教你如何用 CSS 绘制一个完美的圆形。

首先，我们需要画一个盒子

创建一个简单的正方形盒子
.box {
height:100px;
width:100px;
background-color:red;
}

1.使用border-radius圆角属性

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

以下是展示效果

有关border-radius属性的介绍(border-radius - CSS：层叠样式表 | MDN (mozilla.org))

2.clip-path属性

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

以下是展示效果

有关border-radius属性的介绍 (clip-path - CSS：层叠样式表 | MDN (mozilla.org))