圆往往是椭圆形的,我想要的是正圆。 border-radius 100% 不起作用我想知道为什么..
.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;
}
最佳答案
这是一个有一些变化的 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>
关于html - 具有边框半径的CSS中的完美圆不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21717149/