边框看起来很模糊

Question

这个带边框的圆圈看起来很模糊。有可能修复它吗？如何修复？

div {
  border-radius: 50%;
  border: 1px solid black;
  height: 22px;
  width: 22px;
  background-color: white;
}

<div></div>

Answer 1

使用带有透明边框的框阴影似乎也可以减少铬的模糊度
在下面的例子中，第一个圆圈是原始的，第二个圆圈是用方框阴影制作的：

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>

Answer 2

看起来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>

基于这个答案。

Answer 3

尝试使用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>

Answer 4

使用两个div具有更好的渲染效果。

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>