带边框的 CSS 圆圈答案

【问题标题】：CSS Circle with border带边框的 CSS 圆圈
【发布时间】：2016-01-21 12:57:51
【问题描述】：

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

我试过了：

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

但是不能得到红色边框？

【问题讨论】：

您希望红线出现在哪里？考虑添加您的 html 以及

标签： css css-shapes

【解决方案1】：

您在Border shorthand property 中缺少border width 和border style 属性：

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

&lt;div class="circle"&gt;&lt;/div&gt;

此外，您可以为边框半径属性使用百分比，以便该值不依赖于圆的宽度/高度。这就是为什么我使用 50% 作为边界半径（更多信息请参见 border-radius in pixels and percent）。

旁注：在您的示例中，您没有指定没有供应商前缀的border-radius 属性，而您可能不需要，因为只有在chrome 4 safari 4 和Firefox 3.6 之前的浏览器使用它们（参见@987654325 @)。

【讨论】：

嘿，有没有机会多控制一点红色轮廓？让我解释。我不想将红色轮廓显示为一个完整的圆圈，而是有一些参数来控制它的显示量。例如，考虑一些 % 用例。 25% 会显示 3/4 的红线，50% 会显示一半的圆圈等。
@sOltan 使用这种方法，很难按照您的意图控制轮廓。我建议你检查一下 svg 。这是一个例子：stackoverflow.com/questions/29350504/…

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

你忘了设置边框的宽度！将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;
}

&lt;div class="circle"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

这是jsfiddle，因此您可以看到这个工作的示例。

HTML 代码：

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

&lt;div class='circle'&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

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

【讨论】：

感谢编辑@sebastianbrosch 我最近写了太多的降价：)
@web-tiki nuh.. 我只是保持最小的变化