如何在CSS中使DIV变成圆形（附实例）DIV通常与其他HTML元素（如图像和表格）一起使用，为网页或网络应用程序创建一

DIV通常与其他HTML元素（如图像和表格）一起使用，为网页或网络应用程序创建一个布局。它允许网页开发人员使用CSS创建圆形，而不必使用图像或JavaScript库。

在本教程中，我们将看到如何在CSS中制作一个圆形的DIV：

circular div element

第1步：创建DIV元素

首先，创建两个DIV元素，使用任何类的名称，例如 .红色和 .绿色.

<div class="red"></div>
<div class="green"></div>

第2步：使DIV元素呈圆形

现在，为该类添加样式，即：

.red{
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 10px;
  text-align: center;
  border-radius: 100%;
}

.green{
  width: 200px;
  height: 200px;
  background-color: green;
  margin: 10px;
  text-align: center;
  border-radius: 100%;
}

在这里你可以看到我已经添加了border-radius: 100%; ，这将使DIV元素变成圆形。

你也可以通过给不同的border-radius值使DIV元素变成圆形的矩形。