使用border-radius创建一个完全对称的圆，而不指定高度或宽度

Question

似乎将我的border-radius设置为50%或100%并没有做到这一点，并且给了span标签一个拉伸的外观。有没有可能在不设置高度或宽度的情况下使这个圆完全对称?

span {
  background: #232323;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-family: Arial, sans-serif;
  padding: 6px;
}

<span>x</span>

Answer 1

解决方案是将width设置为计算出的字体高度:

width: 1em;

span {
  background: #232323;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  padding: 6px;
  width: 1em;
  text-align: center;
}

<span>x</span>

Answer 2

可能是这样的?

span {
    background: #232323;
    border-radius: 100%;
    color: #fff;
    display: inline-block;
    font-family: arial;
    font-size: 20px;
    text-align: center;
    width: 1.35em;
    padding-bottom:.2em;
}
span.medium {
  
  font-size: 50px;
}
span.ridikulus {
  
  font-size: 500px;
}

<span >x</span>
<span class="medium">x</span>
<span class="ridikulus">x</span>

Answer 3

为了提供另一种方法，而不是依赖于border-radius，我正在考虑使用字形•并将其定位在span标签上。

可以使用font-size调整大小。最大的优点是你不需要生成一个完美的圆。

span {
    color: #fff;
    position: relative;
    line-height: 1;
    display: inline-block;
    padding: 10px;
}
span:before {
    content:'2022';
    color: #000;
    font-family: sans-serif;
    font-size: 10rem;
    position: absolute;
    z-index: -1;
    line-height: 0;
    left: -14px;
    top: 20px;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
}

<span>x</span>