带边框的 CSS 圆
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33277777/
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
CSS Circle with border
提问by Stre
Every guide I find has the line and fill the same colour. All I want is a circle with a red line and white fill.
我找到的每个指南都有线条并填充相同的颜色。我想要的只是一个带有红线和白色填充的圆圈。
I have tried:
我试过了：
.circle {
border: red;
background-color: #FFFFFF;
height: 100px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 100px;
}
But cannot get the red border?
但是无法获得红色边框？
回答by Sebastian Brosch
You forgot to set the width of the border! Change border: red;to border:1px solid red;
你忘记设置边框的宽度了！更改border: red;为border:1px solid red;
Here the full code to get the circle:
这是获取圆圈的完整代码：
.circle {
background-color:#fff;
border:1px solid red;
height:100px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:100px;
}<div class="circle"></div>回答by web-tiki
You are missing the border widthand the border styleproperties in the Border shorthand property:
.circle {
border: 2px solid red;
background-color: #FFFFFF;
height: 100px;
border-radius:50%;
width: 100px;
}<div class="circle"></div>Also, You can use percentages for the border-radius property so that the value isn't dependent of the circle width/height. That is why I used 50% for border-radius (more info on border-radius inn pixels and percent here).
此外，您可以为 border-radius 属性使用百分比，以便该值不依赖于圆的宽度/高度。这就是为什么我使用 50% 作为边界半径（关于边界半径 inn 像素和百分比的更多信息在这里）。
Side note : In your example, you didn't specify the border-radius property without vendor prefixes whitch you propably don't need as only browsers before chrome 4 safari 4 and Firefox 3.6 use them (see canIuse).
旁注：在您的示例中，您没有指定不带供应商前缀的 border-radius 属性，因为只有 chrome 4 safari 4 和 Firefox 3.6 之前的浏览器才使用它们（请参阅canIuse）。
回答by Nalan Madheswaran
Try this:
尝试这个：
.circle {
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 Ya Zhuang
http://jsbin.com/qamuyajipo/3/edit?html,output
http://jsbin.com/qamuyajipo/3/edit?html,output
.circle {
border: 1px solid red;
background-color: #FFFFFF;
height: 100px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 100px;
}
回答by Florin Pop
Here is a jsfiddleso you can see an example of this working.
这是一个jsfiddle，因此您可以看到此工作的示例。
HTML code:
HTML代码：
<div class="circle"></div>
CSS code:
CSS代码：
.circle {
/*This creates a 1px solid red border around your element(div) */
border:1px solid red;
background-color: #FFFFFF;
height: 100px;
/* border-radius 50% will make it fully rounded. */
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius: 50%;
width: 100px;
}<div class='circle'></div>回答by Joshua Johns
.circle {
background-color:#fff;
border:1px solid red;
height:100px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:100px;
}<div class="circle"></div>