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;

＆＃13;

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

＆＃13;

<span>x</span>

＆＃13;

Answer 2

这样的事可能吗？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

为了提供替代方法，我不是依赖border-radius，而是考虑使用字形•并将其放在span标记上。

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

span {
    color: #fff;
    position: relative;
    line-height: 1;
    display: inline-block;
    padding: 10px;
}
span:before {
    content:'\02022';
    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>

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

3 个答案: