相关疑难解决方法(0)

我正在研究一种使用'cogs and chains'的css动画,但我无法创建一个'平滑'的边框旋转序列.

你可以在这个小提琴中看到如何(当前)我正在使用伪元素来生成'旋转'效果.这是通过在白色虚线和黄色虚线边框之间"切换"来完成的,使其看起来像是"边界在旋转".

是)我有的

#one{
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */

}
#two{
  -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateAntiClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateAntiClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateAntiClockwiseAnimation 5s linear infinite; …

我有一个半径div与5px虚线边框,但边框没有正确显示Firefox.它在IE和Chrome中表现出色.

Demo

 div{
        height:100px;
        width: 100px;
        background-color: #ccc;
        border-radius: 50%;
        border:5px dashed #333;
    }

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

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