使用CSS的虚线/虚线圆形 - 在Chrome中无法呈现 [英] Dotted/Dashed circle shapes using CSS - Not rendering right in Chrome

问题描述

我们正在尝试呈现一个可以放置号码的圈子。我想让圆圈使用实线，虚线或虚线边框。此外，颜色可以变化，它将在CSS中定义，所以试图使用图像，这将不是最佳的。

We're trying to render a circle in which I can place a number. I want the circle to use either a solid, dashed or dotted border. In addition the color can vary and it would be all defined in CSS, so trying to use images for this will be less than optimal.

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）中，圆圈顶部有一个缺口。

In IE11 it seems to render fine. Whereas in Chrome(Currently 42.0.2311.135 m or Canary), the there is a gap in the top of the circle.

Chrome示例：

>

IE示例：

有人遇到这个问题，以及如何解决？

Has anyone ran into this issue and how to solve it?

推荐答案

这些差异是预期的，因为每个浏览器呈现它的方式，我们不能做太多的控制它。如果你需要支持FireFox，那么我建议离开这个方法，因为 FF现在无法显示虚线边框。

These differences are expected because of the way how each browser renders it and there is not much that we can do to control it. If you need to support FireFox also then I would suggest moving away from this method because FF cannot display dashed borders as of now.

最好的办法是使用SVG来实现这一点，因为SVG允许通过使用 来更好地控制点/ code> stroke-dasharray 属性。

Your best bet would be to use SVG to achieve this because SVG allows greater control over the dots/dashes through the usage of stroke-dasharray property.

下面是一个示例代码段：（我给这个虽然你没有标记SVG ，因为SVG可能是最适合的这个和示例可以指导你。）

Below is a sample snippet: (I am giving this though you haven't tagged SVG because SVG is probably the best suited for things like this and the example can guide you.)

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>

几乎所有版本的Chrome，Firefox，Safari，Opera和Opera都支持支持SVG IE9 +。

使用 foreignObject 来定位文本是我发现更容易使用和风格，在IE中不工作。因此，您可以使用 text SVG元素，如下面的代码段。

The use of a foreignObject to position the text is the one that I found easier to use and style but it doesn't work in IE. So, you can use the text SVG element like in the below snippet.

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回答。

For supporting lower versions of IE you could look at some libraries like this one or refer to this SO answer.

这可以通过使用除 border 之外的属性来完成，但是这将需要很多箱阴影或伪元素，并不会是大的圆圈是不可取的。

This can be done with CSS using properties other than border also but those would either require a lot of box-shadows or pseudo-elements and would not be very advisable for larger circles.

使用伪元素方法将需要CSS transform ，因此仍然不支持IE8或更低，其他图书馆。

Using pseudo-elements approach would require CSS transform and hence would still not support IE8 or less without the use of other libraries.

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

The box-shadow approach though it has better browser support, is not very scalable. Below is a sample snippet for creating dotted borders using box-shadow approach. This was adapted from The Pragmatick's answer in this thread.

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>

这篇关于使用CSS的虚线/虚线圆形 - 在Chrome中无法呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！