Dieser Kreis mit der Grenze sieht verschwommen aus. Ist es möglich, es zu reparieren und wie?Border Circle sieht verschwommen
div {
border-radius: 50%;
border: 1px solid black;
height: 22px;
width: 22px;
background-color: white;
}<div></div>Zwei divs Mit Wirkung besser machen hat.
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>scheint nicht wie ein wesentlicher Unterschied zum Original zu sein. – andi
Sorry, tut es aber nicht. – Blazemonger
Definietly hat eine Anzeige Unterschied in Chrom: http://i.imgur.com/3fQNWQD.png – circusdei
Versuchen SVG und einen Kreis ein wenig größer machen:
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>Der Antwort unten zum Vergleich hinzugefügt ... nicht versuchen, Ihre Antwort zu stehlen :) – circusdei
Scheint, wie transform: rotate(45deg) hilft, aber nicht 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>auf dieser answer Basierend.
Mit box-shadow mit einem transparenten Rand scheint es auch weniger verschwommen mit Chrom.
Im folgenden Beispiel ist der erste Kreis ist das Original und die zweite mit einem Box-Schatten gemacht:
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>
Welche Browser/OS? –
@ctabuyo - Worüber redest du? – j08691
Alle Browser. Nein, ich will es 1px fest. Gibt es eine Möglichkeit, es zu beheben? –