CSS带边框的圆形

Question

我发现的所有教程都是线和填充颜色相同的。我只想要一个有红色线和白色填充的圆形。

我尝试过:

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

但是无法获得红色边框？

- Stre

---

你想让红线出现在哪里？考虑添加你的HTML代码。 - designarti

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>

- Sebastian Brosch

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的更多信息）。

顺便提一下：在您的示例中，您没有指定不带供应商前缀的border-radius属性，您可能不需要它们，因为只有Chrome 4 Safari 4和Firefox 3.6之前的浏览器使用它们（请参见canIuse）。

- web-tiki

---

嘿，有没有可能稍微更好地控制红色轮廓线？让我解释一下。我不想将红色轮廓线显示为一个完整的圆形，而是希望有一些参数来控制它显示的程度。例如，在某些情况下，以一定的百分比进行设置。25％将显示3/4的红线，50％将显示一半的圆等等。 - sOltan

@sOltan 采用这种方法，很难按照您的意图控制轮廓线。 我建议您尝试使用 SVG。 这是一个示例：https://dev59.com/h10b5IYBdhLWcg3wT_tr - web-tiki

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

- Nalan Madheswaran

Answer 4

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

- Ya Zhuang

---

感谢 @sebastianbrosch 的编辑，最近我写了太多的Markdown :) - Ya Zhuang

@Web-tiki 嗯..我只保留最小的更改。 - Ya Zhuang

Answer 5

Here is a jsfiddle link for you to see an example of this in action.

HTML code:

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

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>

- Florin Pop