[分享]css不用宽高画一个圆

在 CSS 中，如果要画一个圆，通常的做法是设置宽高相等的元素，并将其 borderradius 属性设置为 50。但是，我们可以通过其他方法不使用宽高来画出一个圆形。.circle { width:...

在 CSS 中，如果要画一个圆，通常的做法是设置宽高相等的元素，并将其 border-radius 属性设置为 50%。但是，我们可以通过其他方法不使用宽高来画出一个圆形。

.circle {
  width: 0;
  height: 0;
  padding: 50%;
  border-radius: 50%;
  background-color: #000;
} 

上面的代码使用 padding 属性来创建一个等宽高的区域，并将其 border-radius 属性设置为 50% 以达到圆形效果。这种方法适用于需要对元素内容进行控制的情况下。

.circle:before {
  content: "";
  display: block;
  padding-top: 100%;
  border-radius: 50%;
  background-color: #000;
} 

如果我们只需要一个圆形区域，而不需要控制其内部内容，可以使用伪元素 :before 来实现。以上代码中，我们设置伪元素的 content 属性为空，display 属性为 block，padding-top 属性为 100%，即可创建一个等宽高的区域，然后通过设置其 border-radius 属性为 50% 来得到圆形效果。

总之，不使用宽高来画一个圆可以为我们的布局提供更多的灵活性和可控性。我们可以根据具体需求来选择适宜的方法。