相关疑难解决方法(0)

有人知道我可以在虚线边框中改变线和空白的比例长度(比例线/空白区域是不同的)吗？

我们正在尝试渲染一个可以放置数字的圆圈.我希望圆圈使用实线,虚线或虚线边框.此外,颜色可以变化,并且它将全部在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示例:

IE示例:

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

我需要创建一个带有线性渐变的虚线.我设法使用<hr />以下样式创建虚线:

line {
  border: 0px;
  border-bottom: 2px dashed;
}

而且我也知道要实现渐变,我需要做:

background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(black));

如何使用html和css绘制虚线,如下所示.不是虚线.

"------------------------------------------------- - "

可以使用此边框:1px虚线.但是需要增加破折号的长度尺寸.而不是宽度