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

问题描述

我们正在尝试渲染一个可以放置数字的圆圈.我希望圆圈使用实线、虚线或虚线边框.此外，颜色可能会有所不同，并且都将在 CSS 中定义，因此尝试为此使用图像将不是最佳选择.

circle-score-label {高度:30px；宽度:30px；}圈分数标签.circle {左边距:自动；右边距:自动；边界半径:50%；宽度:100%；高度:100%；位置:相对；边框:3px纯黑色；}圈分数标签 .solid-conf {边框样式:实心；}圆分数标签 .dotted-conf {边框样式:虚线；}圆分数标签 .dashed-conf {边框样式:虚线；}

在 IE11 中它似乎呈现良好.而在 Chrome(当前 42.0.2311.135 m 或 Canary)中，圆的顶部有一个间隙.

Chrome 示例:

IE 示例:

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

解决方案

这些差异是预料之中的，因为每个浏览器呈现它的方式不同，而且我们无法控制它.如果您还需要支持 FireFox，那么我建议您不要使用这种方法，因为 FF 目前无法显示虚线边框.

您最好的选择是使用 SVG 来实现这一点，因为 SVG 通过使用 stroke-dasharray 属性.

下面是一个示例片段:(我给出了这个虽然你没有标记 SVG，因为 SVG 可能最适合这样的事情，这个例子可以指导你.)

svg{高度:100px；宽度:100px；}圆圈 {填充:透明；笔画:绿色；笔画宽度:3；}.坚硬的{中风dasharray:无；}.dashed {中风-dasharray: 8, 8.5;}.dotted {中风-dasharray: 0.1, 12.5;笔画线帽:圆形；}div {高度:100px；宽度:100px；颜色:绿色；字体粗细:粗体；文本对齐:居中；行高:100px；}

对 SVG 的支持 几乎适用于所有版本的 Chrome、Firefox、Safari、Opera 和 IE9+.

使用 foreignObject 来定位文本是我发现更易于使用和样式化的方法，但它在 IE 中不起作用.因此，您可以像下面的代码片段一样使用 text SVG 元素.

svg{高度:100px；宽度:100px；}圆圈 {位置:相对；填充:透明；笔画:绿色；笔画宽度:3；}.坚硬的{中风dasharray:无；}.dashed {中风-dasharray: 8, 8.5;}.dotted {中风-dasharray: 0.1, 12.5;笔画线帽:圆形；}文本 {宽度:100px；文本锚:中间；填充:绿色；字体粗细:粗体；文本对齐:居中；}

为了支持较低版本的 IE，您可以查看一些库，例如 this one 或参考到这个SO答案.

<小时>

这也可以通过 CSS 使用 border 以外的属性来完成，但这些要么需要大量的框阴影或伪元素，并且对于较大的圆圈来说不是很可取.

使用伪元素方法需要 CSS transform，因此如果不使用其他库，仍然不支持 IE8 或更低版本.

box-shadow 方法虽然有更好的浏览器支持，但不是很可扩展.下面是使用 box-shadow 方法创建虚线边框的示例片段.这改编自 The Pragmatick 在 这个话题.

div {位置:相对；高度:100px；宽度:100px；边距:10px；文本对齐:居中；行高:100px；边界半径:50%；}.dotted {框阴影:0px -55px 0px -48px 蓝色，0px 55px 0px -48px 蓝色，55px 0px 0px -48px 蓝色，-55px 0px 0px -48px 蓝色，-39px -39px 0px -48px 蓝色，39px -39px 蓝色0px, -39px 39px 0px -48px 蓝色, 39px 39px 0px -48px 蓝色, -22px -51px 0px -48px 蓝色, -51px 22px 0px -48px 蓝色, 51px -22px 0px -48px 蓝色, -51px -242px 蓝色051px 22px 0px -48px 蓝色，22px 51px 0px -48px 蓝色，-22px 51px 0px -48px 蓝色，22px -51px 0px -48px 蓝色；}

100

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;
}

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 example:

IE example:

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

解决方案

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.

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.

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>

Support for SVG is available in almost all versions of Chrome, Firefox, Safari, Opera and IE9+.

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>

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

---

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.

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

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屋！