CSS 不使用固定宽度和高度创建圆形

在本文中，我们将介绍如何使用CSS创建一个圆形，而不需要使用固定的宽度和高度来实现。

CSS样式表中可以使用border-radius属性来创建一个圆形。通常情况下，我们会指定一个固定的宽度和高度，然后将border-radius设置为50%，以实现圆形效果。但是，如果我们不知道要创建的圆形的宽度和高度，该怎么办呢？

阅读更多：CSS 教程

使用padding和伪元素创建圆形

一种解决方法是使用padding和伪元素来创建一个动态的圆形。我们可以设置一个父元素，将宽度和高度设置为0，并且设置一个padding为百分比（比如50%）来撑开元素的大小。然后，使用伪元素before或after来添加一个固定宽度和高度的内容，再将border-radius属性设置为50%，就可以创建出一个圆形了。

下面是一个示例代码：

<style>
.circle {
  position: relative;
  width: 0;
  height: 0;
  padding: 50%;
}

.circle:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: red;
}
</style>

<div class="circle"></div>

在上面的示例中，我们使用了一个类名为.circle的div作为父元素。通过设置其宽度和高度为0，并设置padding为50%，实现了圆形的基本形状。然后，使用伪元素before来创建一个具有100%宽度和高度、border-radius为50%、背景颜色为红色的圆形元素。

通过这种方法，我们可以创建一个动态的圆形，不需要具体的宽度和高度。

使用resize事件动态更新圆形的大小

除了使用padding和伪元素来创建动态的圆形外，我们还可以结合resize事件来动态更新圆形的大小。当浏览器窗口的大小发生改变时，我们可以监听resize事件，并通过JavaScript代码来更新圆形元素的大小。

下面是一个示例代码：

<style>
.circle {
  position: relative;
  width: 0;
  height: 0;
  padding: 50%;
}

.circle:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: red;
}
</style>

<script>
window.addEventListener("resize", function() {
  var circle = document.querySelector(".circle");
  var width = circle.offsetWidth;
  circle.style.height = width + "px";
});
</script>

<div class="circle"></div>

在上面的示例中，我们使用了resize事件来监听浏览器窗口的大小变化。当resize事件触发时，我们通过JavaScript代码获取圆形元素的宽度，然后将其设置给圆形元素的高度。这样，圆形的大小就会跟随浏览器窗口的大小变化而变化。