Html 带有边界半径的css中的完美圆不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21717149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
perfect circle in css with border-radius doesn't work
提问by user3277912
the circle tend be oval, what I want is perfect circle. border-radius 100% isn't work I wonder why..
圆圈往往是椭圆形，我想要的是完美的圆形。边界半径 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;
}
回答by R. Schifini
Here is a JSfiddle with some changes:
这是一个 JSfiddle 有一些变化：
The main changes are:
主要变化有：
padding: 0px;
width: 50px;
height: 50px;
line-height: 50px;
Having a line-height equal to the container height will center the text vertically. This only works if the text fits on a single line.
行高等于容器高度将使文本垂直居中。这仅适用于文本适合一行的情况。
Edit:(copied code from JSFiddle)
编辑：（从 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>回答by Nalan Madheswaran
if it's not perfect circle check display: inline-block and border-radius: 50%:
如果它不是完美的圆检查显示：inline-block 和 border-radius: 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);
}
回答by Ansyori
check this out
看一下这个
.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;
}
回答by Onesmus.A
I had the same issue. When I added a 100% border-radius, my picture turned into an oval. That is because my picture is wider than it is tall. Imagine smoothing the edges of a rectangle. If you want your image to be circular, you have to make sure the height and width dimensions are the same. You could try setting them by doing the following:
我遇到过同样的问题。当我添加 100% 的边框半径时，我的图片变成了椭圆形。那是因为我的照片比它高。想象一下平滑矩形的边缘。如果您希望图像为圆形，则必须确保高度和宽度尺寸相同。您可以尝试通过执行以下操作来设置它们：
css height: 200px; width: 200px; (so the point is having equal height and with in your CSS)
css高度：200px；宽度：200px；（所以重点是在你的 CSS 中具有相同的高度和 with）
This will make sure that your image is circular, however, it may cause your image to stretch and become distorted because your originally image is NOT a perfect square I presume.
这将确保您的图像是圆形的，但是，它可能会导致您的图像拉伸并扭曲，因为我认为您的原始图像不是一个完美的正方形。
