在css中创建10个或更多虚线边框的圆圈

Question

想要使用带有6个或更多虚线边框的css或jquery打印圆圈。请参见下图。

虚线的数量也各不相同。它可能超过10或小于10.灰色破折号是剩余任务的数量＆amp;蓝色是紧凑的任务。

Answer 1

您可以使用边框半径和边框样式：

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px dashed red;
    background: black;
}

这是JS Fiddle DEMO，您可以根据自己的需要进行调整。

Answer 2

根据我的知识，你不能用虚线边框来做。

  

注意：无法控制点和短划线的间距，也无法控制短划线的长度。鼓励实施选择使角落对称的间距。

     

注意：此规范未定义如何在角落中连接不同样式的边框。另请注意，如果填充小于角落的半径，圆角可能会导致角落和内容重叠。

请参阅 - http://www.w3.org/TR/css3-background