To kółko z obramowaniem wygląda na rozmyte. Czy można to naprawić i jak?Kółko wygląda na rozmyte
div {
border-radius: 50%;
border: 1px solid black;
height: 22px;
width: 22px;
background-color: white;
}<div></div>stosując dwa DIV ma lepsze renderowanie efektu.
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>nie wydaje się znaczącą różnicą w stosunku do oryginału. – andi
Przepraszam, ale tak się nie dzieje. – Blazemonger
Definedtly ma różnicę w wyświetlaniu w kolorze chrom: http://i.imgur.com/3fQNWQD.png – circusdei
Spróbuj użyć SVG i utworzyli krąg trochę większy:
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>Dodano do odpowiedzi poniżej dla porównania ... nie próbuje ukraść odpowiedzi :) – circusdei
wydaje się transform: rotate(45deg) pomaga, ale nie 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>podstawie tej answer.
Za pomocą przezroczystej ramki wydaje się, że jest mniej rozmazany z chromem.
W poniższym przykładzie pierwszy krąg jest oryginalny, a druga jest wykonana z 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>
jakiej przeglądarki/OS? –
@ctabuyo - O czym ty mówisz? – j08691
Wszystkie przeglądarki. nie, chcę 1px solidnie. Czy istnieje sposób, aby to naprawić? –