使用CSS绘制的点线圆形-在Chrome中未正确呈现

Question

我们正在尝试渲染一个圆形，在其中我可以放置一个数字。我希望圆形使用实线、虚线或点线边框。此外，颜色可以变化，并且所有内容都在CSS中定义，因此尝试使用图像来实现这一点将不是最佳选择。

circle-score-label {
  height: 30px;
  width: 30px;
}

circle-score-label .circle {
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
  border: 3px solid black;
}

circle-score-label .solid-conf {
  border-style: solid;
}

circle-score-label .dotted-conf {
  border-style: dotted;
}

circle-score-label .dashed-conf {
  border-style: dashed;
}

在IE11中，它似乎渲染得很好。而在Chrome（当前版本为42.0.2311.135 m或Canary）中，圆形顶部有一个间隙。

Chrome示例：

IE示例：

是否有人遇到过这个问题，如何解决？

- Gabriel Kohen

---

你能提供一个 JSFiddle 吗？ - Tim McClure

circle-score-label 需要加上 .（虽然这可能是一个打字错误）。 - jbutler483

这可能只是浏览器呈现的问题。我刚在Chrome中尝试了一下，发现有一个间隙，通过将高度和宽度更改为像素可以解决此问题，因为它适合于另一个点或线等。 - Ruddy

如果我没错的话，这种方法在火狐浏览器上会表现得更糟，因为火狐无法显示虚线边框。它看起来像一个实心圆。最好使用其他方法来生成点状或虚线边框。 - Harry

@jbutler483，circle-score-label是一个自定义的Angular指令（标签），所以现在没有拼写错误。您说得对，可以通过使用相同名称的类来实现相同的效果。 - Gabriel Kohen

Answer 1

由于每个浏览器呈现方式的不同，我们无法控制它，因此应该预计存在这些差异。如果您需要支持 Firefox，则建议不要使用此方法，因为目前 Firefox 无法显示虚线边框。

您最好使用 SVG 来实现此目的，因为 SVG 可以通过使用 stroke-dasharray 属性更好地控制点/虚线。

以下是一个示例代码片段：（我推荐使用 SVG，尽管您没有标记 SVG，因为 SVG 可能是最适合这种事情的，而且示例可以指导您。）

svg{
  height: 100px;
  width: 100px;
}
circle {
  fill: transparent;
  stroke: green;
  stroke-width: 3;
}
.solid{
  stroke-dasharray: none;
}
.dashed {
  stroke-dasharray: 8, 8.5;
}
.dotted {
  stroke-dasharray: 0.1, 12.5;
  stroke-linecap: round;
}
div {
  height: 100px;
  width: 100px;
  color: green;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
}

<svg viewBox="0 0 120 120">
  <circle cx="55" cy="55" r="50" class="solid" />
  <foreignObject x="5" y="5" height="100px" width="100px">
    <div>100</div>
  </foreignObject>
</svg>

<svg viewBox="0 0 120 120">
  <circle cx="55" cy="55" r="50" class="dashed" />
  <foreignObject x="5" y="5" height="100px" width="100px">
    <div>100</div>
  </foreignObject>
</svg>

<svg viewBox="0 0 120 120">
  <circle cx="55" cy="55" r="50" class="dotted" />
  <foreignObject x="5" y="5" height="100px" width="100px">
    <div>100</div>
  </foreignObject>
</svg>

SVG支持几乎在所有版本的Chrome、Firefox、Safari、Opera和IE9+中可用。

使用foreignObject定位文本最容易使用和样式化，但它在IE中不起作用。 因此，您可以像下面的片段中一样使用text SVG元素。

svg{
  height: 100px;
  width: 100px;
}
circle {
  position: relative;
  fill: transparent;
  stroke: green;
  stroke-width: 3;
}
.solid{
  stroke-dasharray: none;
}
.dashed {
  stroke-dasharray: 8, 8.5;
}
.dotted {
  stroke-dasharray: 0.1, 12.5;
  stroke-linecap: round;
}
text {
  width: 100px;
  text-anchor: middle;
  fill: green;
  font-weight: bold;
  text-align: center;
}

<svg viewBox="0 0 120 120">
  <circle cx="55" cy="55" r="50" class="solid" />
  <text x="55" y="60">
    100
  </text>
</svg>

<svg viewBox="0 0 120 120">
  <circle cx="55" cy="55" r="50" class="dashed" />
  <text x="55" y="60">
    100
  </text>
</svg>

<svg viewBox="0 0 120 120">
  <circle cx="55" cy="55" r="50" class="dotted" />
  <text x="55" y="60">
    100
  </text>
</svg>

要支持低版本的IE，你可以使用一些类库，比如这个，或者参考这个SO答案。

---

也可以使用CSS中除了border之外的其他属性来实现，但这些方法要么需要大量的阴影效果，要么需要使用伪元素，不太适合用于制作较大的圆形边框。

使用伪元素方法需要CSS transform属性，因此仍然无法在不使用其他库的情况下支持IE8或更早版本。

使用box-shadow方法虽然浏览器支持更好，但可扩展性不太好。下面是一个使用box-shadow方法创建虚线边框的示例代码。这段代码改编自The Pragmatick在这个线程中的回答。

div {
  position: relative;
  height: 100px;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  border-radius: 50%;
}
.dotted {
  box-shadow: 0px -55px 0px -48px blue, 0px 55px 0px -48px blue, 55px 0px 0px -48px blue, -55px 0px 0px -48px blue, -39px -39px 0px -48px blue, 39px -39px 0px -48px blue, -39px 39px 0px -48px blue, 39px 39px 0px -48px blue, -22px -51px 0px -48px blue, -51px 22px 0px -48px blue, 51px -22px 0px -48px blue, -51px -22px 0px -48px blue, 51px 22px 0px -48px blue, 22px 51px 0px -48px blue, -22px 51px 0px -48px blue, 22px -51px 0px -48px blue;
}

<div class="dotted">
  100
</div>

- Harry

---

@Harry的回答非常好。当我看到你的答案中有SVG时，我恍然大悟。这对我来说非常完美，因为我需要支持IE9+和evergreen浏览器。 - Gabriel Kohen