如何创建均匀间距的虚线圆？

Question

我想用CSS制作一个虚线圆，并通过以下过程创建它。

尽管可以通过此过程显示虚线圆圈，虚线的末尾与起点之间的间隙变窄，并且间隙不均匀。

.c {
  width: 500px;
  height: 500px;
  border-width: 15px;
  border-style: dashed;
  border-radius: 600px;
}

<div class="c"></div>

如果仅靠CSS无法做到这一点，我们正在考虑使用JavaScript或类似的方法。

Answer 1

将stroke-dasharray与SVG一起使用。

svg {
  width: 20vmax;
  height: 20vmax;
}

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" stroke-dasharray="10, 4" fill="transparent" stroke="purple" stroke-width="5" />
</svg>

或者您可以在不使用Firefox的情况下使用radial-gradient()，repeating-conic-gradient()功能。

.c {
  width: 20vmax;
  height: 20vmax;
  background-image: radial-gradient(#fff 68%, transparent 68% 70%, #fff 70%),
    repeating-conic-gradient(#000 0% 3%, transparent 3% 5%);
}

<div class="c"></div>