Círculo CSS com contorno
eu tentei:
.circle {
border: red;
background-color: #FFFFFF;
height: 100px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 100px;
}
Mas não consegue chegar à fronteira vermelha?
5 answers
border: red;
em border:1px solid red;
Aqui está o código completo para obter o círculo.
.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>
Falta-lhe a largura do contornoe o estilo do contorno nas propriedades da estenografia do contorno :
.circle {
border: 2px solid red;
background-color: #FFFFFF;
height: 100px;
border-radius:50%;
width: 100px;
}
<div class="circle"></div>
Também pode usar percentagens para a propriedade do raio-contorno, para que o valor não dependa da largura/altura do círculo. É por isso que eu usei 50% para o raio de fronteira (mais informações sobre raio de fronteira em pixels inn e percentagem aqui).
nota lateral : no seu exemplo, não indicou a propriedade do contorno-raio sem os prefixos do Fornecedor de que provavelmente não necessita, uma vez que só os navegadores antes do Chrome 4 safari 4 e do Firefox 3.6 os usam (ver } canIuse).
Http://jsbin.com/qamuyajipo/3/edit?html, Produção
.circle {
border: 1px solid red;
background-color: #FFFFFF;
height: 100px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 100px;
}
Aqui está um jsfiddle para que você possa ver um exemplo deste trabalho.
Código HTML:
<div class="circle"></div>
Código 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>
Tenta isto:
.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);
}