使用CSS的虚线/虚线圆形 - 在Chrome中无法渲染

时间:2015-05-06 21:02:50

标签: css angularjs google-chrome internet-explorer svg

我们正在尝试渲染一个可以放置数字的圆圈。我希望圆圈使用实线,虚线或虚线边框。此外,颜色可以变化,并且它将全部在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米或Canary)中,圆圈顶部有一个间隙。

Chrome示例:

enter image description here

IE示例:

enter image description here

有没有人遇到过这个问题以及如何解决它?

1 个答案:

答案 0 :(得分:7)

这些差异是预期的,因为每个浏览器呈现它的方式,我们无法控制它。如果您还需要支持FireFox,那么我建议您放弃使用此方法,因为FF cannot display dashed borders as of now

您最好的选择是使用SVG来实现这一点,因为SVG允许通过使用stroke-dasharray属性更好地控制点/破折号。

下面是一个示例代码段:(虽然您没有标记SVG ,但我提供此,因为SVG可能最适合此类内容,示例可以指导您。)< / p>

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

Support for SVG几乎适用于所有版本的Chrome,Firefox,Safari,Opera和IE9 +。

使用foreignObject来定位文本是我发现更容易使用和样式的文本,但它在IE中不起作用。因此,您可以使用text SVG元素,如下面的代码段所示。

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

要支持较低版本的IE,您可以查看某些库,例如this one或参考this SO answer

这可以通过CSS使用除border以外的属性来完成,但是这些要么需要大量的盒阴影或伪元素,对于较大的圆圈也不是很合适。

使用伪元素方法需要CSS transform,因此在不使用其他库的情况下仍然不支持IE8或更少。

盒式阴影方法虽然具有更好的浏览器支持,但不是很可扩展。以下是使用box-shadow方法创建虚线边框的示例代码段。这是根据this thread中的Pragmatick的回答改编的。

&#13;
&#13;
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;
}
&#13;
<div class="dotted">
  100
</div>
&#13;
&#13;
&#13;