边框看起来很模糊答案

【问题标题】：Border circle looks blurry边框看起来很模糊
【发布时间】：2016-04-16 08:14:31
【问题描述】：

这个带边框的圆圈看起来很模糊。是否有可能解决它以及如何解决？

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

&lt;div&gt;&lt;/div&gt;

【问题讨论】：

@ctabuyo - 你在说什么？
所有浏览器。不，我想要它 1px 实心。有办法解决吗？
你能用一张图片吗？
AFAIK，您看到的是在特定像素分辨率下抗锯齿的结果。您可以使用更好的屏幕（显然不是您想要的）来修复它，或者（取决于您的实际用例）改用图像。

标签： css border css-shapes

【解决方案1】：

使用带有透明边框的 box-shadow 似乎也可以减少 chrome 的模糊度。
在下面的例子中，第一个圆圈是原始的，第二个是用 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>

【讨论】：

【解决方案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);
}

&lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt;

基于此answer。

【讨论】：

【解决方案3】：

使用两个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>

【讨论】：

与原版的区别似乎不大。
抱歉，没有。
将两种方法并排放置以进行比较，并将宽度/高度固定为一个
嵌套在 110% 是...奇怪 :D
@Qwertiy 是的——也明白了。

【解决方案4】：

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

【讨论】：

添加到下面的答案中以进行比较...不要试图窃取您的答案:)