Этот круг с границей выглядит размытым. Можно ли исправить это и как?
div {
border-radius: 50%;
border: 1px solid black;
height: 22px;
width: 22px;
background-color: white;
}
<div></div>
Этот круг с границей выглядит размытым. Можно ли исправить это и как?
div {
border-radius: 50%;
border: 1px solid black;
height: 22px;
width: 22px;
background-color: white;
}
<div></div>
Использование box-shadow с прозрачной рамкой, похоже, делает его менее размытым с хром.
В следующем примере первый круг является оригиналом, а второй - теней box:
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>
Кажется, что transform: rotate(45deg)
помогает, но не 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>
Использование двух divs имеет лучший эффект рендеринга.
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>
Попробуйте использовать svg и сделайте круг немного больше:
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>