CSS-круг с рамкой

Каждый гид, который я нахожу, имеет линию и заполняет тот же цвет. Все, что я хочу, это круг с красной линией и белым заполнением.

Я пытался:

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

Но не может получить красную границу?

+15
источник поделиться
5 ответов

Вы забыли установить ширину границы! Изменить 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>
+26
источник

Вам не хватает границ и свойств стиля границы в свойстве Сокращение границ:

.circle {
    border: 2px solid red;
    background-color: #FFFFFF;
    height: 100px;
    border-radius:50%;
    width: 100px;
}
<div class="circle"></div>

Кроме того, вы можете использовать проценты для свойства border-radius, чтобы значение не зависело от ширины/высоты круга. Вот почему я использовал 50% для пограничного радиуса (больше информации о пикселях внутри границ и процентах здесь).

Боковое примечание. В вашем примере вы не указали свойство border-radius без префиксов поставщиков, которым вы, возможно, не нужны, как только браузеры, прежде чем использовать chrome 4 safari 4 и Firefox 3.6 (см. CanIuse).

+11
источник

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;
}
+2
источник

Вот 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;
    }
<div class='circle'></div>
+1
источник

Попробуй это:

.cirlce {
    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);
    }
+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос