在邊界半徑的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中的完美圓圈不起作用

回答

相關問題