具有边框半径的CSS中的完美圆不起作用

Question

圆往往是椭圆形的，我想要的是完美的圆。 border-radius 100% 不起作用我想知道为什么..

http://jsfiddle.net/8gD2m/1/

 .badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: lighter !important;
    line-height: 1;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #d73d33;
    border-radius: 50px;
    position: relative;
    top: -3px;
}

原文由 user3277912 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个有一些变化的 JSfiddle：

用于圆形徽章的 JSFiddle

主要变化是：

 padding: 0px;
width: 50px;
height: 50px;
line-height: 50px;

使行高等于容器高度将使文本垂直居中。这仅在文本适合单行时才有效。

编辑：（ 从 JSFiddle 复制代码）

 .badge {
    display: inline-block;

    padding: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;

    font-size: 12px;
    font-weight: lighter !important;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #d73d33;
    border-radius:50px;
    position: relative;
    top: -3px;
}

 <span class="badge badge-success">8</span>

原文由 R. Schifini 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果它不是完美的圆检查显示：内联块和边界半径：50%：

  .cirlce {
    height: 20px;
    width: 20px;
    padding: 5px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    color:#fff;
    font-size:1.1em;
    font-weight:600;
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.2);
    }

原文由 Nalan Madheswaran 发布，翻译遵循 CC BY-SA 3.0 许可协议