css不用圆角画圆 css画一个圆

1、要用CSS画一个圆，可以使用border-radius属性来实现。border-radius属性用于设置元素的边框圆角的半径，通过将四个角的半径设置为相同的值，就可以实现一个圆形的边框。

示例代码如下：

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

在上面的示例代码中，我们创建了一个类名为.circle的元素，并设置其宽度和高度为100px，然后通过border-radius属性将边框的圆角半径设置为50%。由于宽度和高度相等，并且圆角半径设置为50%，所以该元素的边框会呈现出一个圆形。

2、除了使用border-radius属性之外，还可以使用伪元素:before或:after来实现圆形效果。通过设置伪元素的宽度和高度与父元素相等，并将border-radius属性设置为50%，可以使伪元素呈现出一个圆形。

示例代码如下：

.circle {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
}
.circle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

在上面的示例代码中，我们创建了一个类名为.circle的元素，并设置其宽度和高度为100px。然后，通过设置伪元素:before的宽度和高度与父元素相等，并将border-radius属性设置为50%，使伪元素呈现出一个圆形。通过设置伪元素的position为absolute，并将top和left属性设置为0，可以使伪元素覆盖在父元素上方，从而实现圆形的效果。

除了上述方法外，还可以使用transform属性的scale函数来实现圆形效果。通过将元素的宽度和高度设置为相等的值，并将transform属性的scale函数的参数设置为0.5，可以将元素缩放为原来的一半，从而呈现出一个圆形。

示例代码如下：

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(0.5);
}

在上面的示例代码中，我们创建了一个类名为.circle的元素，并设置其宽度和高度为100px。然后，通过将transform属性的scale函数的参数设置为0.5，将元素缩放为原来的一半，从而呈现出一个圆形。

以上是三种常用的方法来使用CSS画一个圆形的示例代码。通过使用border-radius属性、伪元素:before或:after以及transform属性的scale函数，我们可以轻松地实现圆形的效果。这些方法在实际开发中经常用到，可以为网页设计带来更加美观和有趣的效果。