在边界半径的CSS中的完美圆圈不起作用

圆圈趋于椭圆形，我想要的是完美圆。边界半径100％没有工作，我不知道为什么..在边界半径的CSS中的完美圆圈不起作用

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

来源

2014-02-12 user3277912

我认为你需要有这个四面一样'padding'工作。可能也想尝试减少你的'行高'。这可能也只适用于单位数字。额外的数字将增加必要的宽度，但高度将保持不变。 – Travesty3

这里是一个的jsfiddle有了一些变化：

JSFiddle for round badge

主要修改为：

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

具有与容器高度相等的行高将使文本垂直居中。这仅适用于文本适合单行的情况。

来源

2014-02-12 02:11:43

检查了这一点

.badge { 
    display: inline-block; 
    min-width: 10px; 
    padding: 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; 
}

来源

2014-02-12 02:10:56 Ansyori

，如果它不是完美的圆检查显示：inline-block的和边界半径：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); 
    }

来源

2017-09-21 05:08:59

在边界半径的CSS中的完美圆圈不起作用

回答

相关问题