如何做一個完整的圓？裡面顯示數字

Question

數字有個位數到百位數

padding:10px;
    background-color:#F00;
    color:#fff;
    border-radius:50%;

<span class="alert">9</span>

<span class="alert">999</span>

如何讓它保持正圓的同時
當有數字時不變形？ 個位數和百位數

Answer 1

网上找了个

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

.circle {
  display: inline-block;
  text-align: center;
  line-height: 1;
  background-color: red;
  border-radius:50%;
  font-size: 14px;
}

.circle span {
  display: block;
  padding: 50%;
  margin: -2em -50% 0;
  position: relative;
  top: 1em;
  border: 0.5em solid transparent;
  white-space: nowrap;
}

http://jsfiddle.net/zcd75Lcd/

Answer 2

你要行把span设置为block 设置个宽高像下面的样式

width: 30px;
height: 30px;
background-color: #F00;
color: #fff;
border-radius: 50%;
display: block;
text-align: center;
line-height: 30px;

Answer 3

border-radius：xxx  宽度是 元素的长度的一半