带边框的CSS Circle

Question

我找到的每个指南都有一条线并填充相同的颜色.我想要的只是一个带有红线和白色填充的圆圈.

我试过了:

.circle {
    border: red;
    background-color: #FFFFFF;
    height: 100px;
    -moz-border-radius:75px;
    -webkit-border-radius: 75px;
    width: 100px;
}

但是不能得到红色边框？

Answer 1

你忘了设置边框的宽度!更改border: red;到border:1px solid red;

这里是获取圆圈的完整代码:

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

Answer 2

这是因为丢失了边框的宽度和边框样式的属性略写的边框属性:

.circle {
    border: 2px solid red;
    background-color: #FFFFFF;
    height: 100px;
    border-radius:50%;
    width: 100px;
}

<div class="circle"></div>

此外,您可以使用border-radius属性的百分比,以便该值不依赖于圆宽/高度.这就是为什么我使用50%作为border-radius(更多关于border-radius inn像素和%的信息).

旁注:在您的示例中,您没有指定border-radius属性而没有供应商前缀,因为在Chrome 4 safari 4和Firefox 3.6之前,只有浏览器可以使用它们(请参阅canIuse).

Answer 3

尝试这个：

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

Answer 4

http://jsbin.com/qamuyajipo/3/edit?html,输出

.circle {
    border: 1px solid red;
    background-color: #FFFFFF;
    height: 100px;
    -moz-border-radius:75px;
    -webkit-border-radius: 75px;
    width: 100px;
}