带有边框的CSS圆圈 [英] CSS Circle with border

问题描述

我发现的每个指南都有相同的颜色。

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.

我试过：

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

但不能得到红色边框？

推荐答案

您忘了设置边框的宽度！更改 border：red; 到 border：1px solid red;

You forgot to set the width of the border! Change border: red; to 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>

这篇关于带有边框的CSS圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！