使用 CSS 的虚线/虚线圆形 - 在 Chrome 中无法正确呈现

Posted 2023-03-06

【中文标题】使用 CSS 的虚线/虚线圆形 - 在 Chrome 中无法正确呈现

【英文标题】：Dotted/Dashed circle shapes using CSS - Not rendering right in Chrome

【发布时间】：2015-07-17 05:21:09

【问题描述】：

我们正在尝试渲染一个圆圈，我可以在其中放置一个数字。我希望圆圈使用实心、虚线或虚线边框。此外，颜色可能会有所不同，并且都将在 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 示例：

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

【问题讨论】：

你能提供一个jsfiddle吗？

circle-score-label 也需要.（尽管这可能是一个错字）

这可能只是浏览器如何呈现它的问题。我只是在 Chrome 中完成了它并且有一个间隙，通过 px 更改高度和宽度是它的修复，因为它适合另一个点或线等。

如果我没记错的话，这在 FF 中会表现得更糟，因为 FF 不能显示虚线边框。它看起来像一个实心圆圈。最好使用其他方法来生成虚线或虚线边框。

@jbutler483，circle-score-label 是一个自定义的 Angular 指令（标签），所以现在这个错误，你是对的，相同的效果可以用同名的类来标记。

【参考方案1】：

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

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

下面是一个示例 sn-p：（我给出这个 虽然你没有标记 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"  >
    <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"  >
    <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"  >
    <div>100</div>
  </foreignObject>
</svg>

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

使用foreignObject 来定位文本是我发现更易于使用和样式化的一种，但它在 IE 中不起作用。所以，你可以像下面的 sn-p 一样使用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，您可以查看一些库，例如 this one 或参考 this SO answer。

---

这也可以通过 CSS 使用 border 以外的属性来完成，但那些需要大量的盒子阴影或伪元素，并且对于较大的圆圈不是非常可取的。

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

box-shadow 方法虽然有更好的浏览器支持，但可扩展性不是很好。下面是使用box-shadow 方法创建虚线边框的示例 sn-p。这改编自 The Pragmatick 在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>

【讨论】：

漂亮地回答了@Harry。有一个“呃！”我在您的回答中看到 SVG 的那一刻。这对我来说是完美的，因为我需要支持 IE9+ 和常青浏览器。