Questo cerchio con il bordo appare sfocato. È possibile risolvere il problema e come?Il cerchio di bordo sembra sfocato
div {
border-radius: 50%;
border: 1px solid black;
height: 22px;
width: 22px;
background-color: white;
}<div></div>Utilizzando due div ha una migliore render effetto.
div, svg {
float: left;
clear: left;
}
p {
float :left;
}
#div0{
border-radius: 50%;
background-color: #fff;
height: 22px;
width: 22px;
border: 1px solid #000;
}
#div1 {
border-radius: 50%;
background-color: black;
height: 24px;
width: 24px;
}
#div2 {
border-radius: 50%;
height: 22px;
width: 22px;
background-color: white;
position: relative;
top: 1px;
left: 1px;
}<div id="div0"></div>
<p>Original</p>
<svg width=26 height=26>
<circle cx=13 cy=13 r=12 stroke-width=1 stroke=black fill=none />
</svg>
<p>SVG</p>
<div id="div1">
<div id="div2">
</div>
</div>
<p>Nested</p>non sembra una differenza significativa rispetto all'originale. – andi
Siamo spiacenti, ma non è così. – Blazemonger
Definietly ha una differenza di visualizzazione in chrome: http://i.imgur.com/3fQNWQD.png – circusdei
Provare a utilizzare SVG e fare un cerchio un po 'più grande:
div {
display: inline-block;
border-radius: 50%;
width: 22px;
height: 22px;
border: 1px solid black;
}<svg width=56 height=26>
<circle cx=13 cy=13 r=12 stroke-width=1 stroke=black fill=none />
<circle cx=43 cy=13 r=11.5 stroke-width=1 stroke=black fill=none />
</svg>
<div></div>Aggiunto alla risposta sotto per il confronto ... non cercando di rubare la tua risposta :) – circusdei
Sembra come transform: rotate(45deg) aiuta, ma non transform: translateZ(1px) rotate(45deg):
div {
display: inline-block;
border-radius: 50%;
width: 22px;
height: 22px;
border: 1px solid black;
}
div + div {
transform: rotate(45deg);
}
div + div + div {
transform: rotate(45deg);
transform: translateZ(1px) rotate(45deg);
}<div></div> <div></div> <div></div>sulla base di questo answer.
Utilizzo di box-shadow con un bordo trasparente sembra renderlo meno sfocato anche con cromo.
Nell'esempio seguente, il primo cerchio è l'originale e il secondo è fatto con un box-shadow:
div {
border-radius: 50%;
border: 1px solid black;
height: 22px;
width: 22px;
background-color: white;
float:left;
}
div + div{
width:20px;
height:20px;
border-color:transparent;
box-shadow:0 0 0 1px #000;
margin:1px 3px;
}<div></div>
<div></div>
Quale browser/OS? –
@ctabuyo - Di cosa stai parlando? – j08691
Tutti i browser. no, lo voglio 1px solido. C'è un modo per risolverlo? –