如何创建等距虚线圆？

16

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

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

.c {
  width: 500px;
  height: 500px;
  border-width: 15px;
  border-style: dashed;
  border-radius: 600px;
}
<div class="c"></div>
展开摘要

有没有办法使差距均匀？我们还能控制破折号之间的距离吗？

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

javascript  html  css 
— Temani Afif
source
4
就其价值而言，只有Chrome（和我的克隆）似乎与您的代码有关。
— 阿尔瓦罗·冈萨雷斯
3
是的 对我看起来很好
— 草莓

Answers:

14

这是该conic-gradient()解决方案的优化版本，您可以在其中轻松控制破折号的数量以及之间的间隔

显示代码段

为了完全透明，我们考虑 mask

显示代码段

带有均匀空格的CSS虚线圆

为了使事情变得有趣，我们甚至可以考虑对虚线进行更复杂的着色：

显示代码段

透明CSS破折号，带有圆锥形渐变和遮罩

您可能肯定希望里面有一些内容，以便更好地在伪元素上应用遮罩/背景以避免遮盖内容：

显示代码段

获得更多CSS想法以获得相似结果的相关问题：仅CSS饼图-如何在切片之间添加间距/填充？。您会找到更多受支持的方法conic-gradient()（实际上在Firefox上不起作用），但是与上面的解决方案（只需要一个元素）不同，您需要使用很多代码。

使用SVG，您还需要进行一些计算以确保您具有均匀的间距：

svg {
  width:200px;
}
<svg viewBox="-3 -3 106 106">
  <!-- 
    The circumference of the circle is 2*PI*R ~ 314.16
    if we want N dashed we use d=314.16/N
    For N = 20 we have d=15.71
    For a gap of 5 we will have "10.71,5" (d - gap,gap)
  -->
  <circle cx="50" cy="50" r="50" 
    stroke-dasharray="10.71, 5" 
    fill="transparent" 
    stroke="black" 
    stroke-width="5" />
</svg>
展开摘要

使用CSS变量，我们可以简化它，但并非所有浏览器都支持它（实际上，它在Firefox中不起作用）

显示代码段

SVG均匀破折号

我们还可以轻松地使用SVG作为背景，使事情变得更加灵活：

显示代码段

当用作背景时，您需要手动设置该值，因此每次都需要不同的背景。我们只能通过使用SVG作为遮罩来使颜色易于更改；

显示代码段

SVG虚线边框，间距均匀

— Temani Afif
source
1
尽管这些是在Chrome上看起来不错的有趣方法，但是只有第一个基本的SVG版本功能才能在Firefox中运行。值得注意的是，Firefox（甚至是Nightly版本）不支持conic-gradient()或repeating-conic-gradient()。因此，这些方法将来可能是一种可行的方法，但是，如果需要跨浏览器的功能，则目前无法使用。
— Makyen
1
鉴于OP的代码问题在Firefox中可以正常运行（即，上述问题在Firefox中不存在），但在Chrome中确实存在，因此最好探索至少Chrome（+克隆）与Firefox之间的区别，同时提供在这两种功能中均有效的代码（或至少明确声明了现在可以使用的具有跨浏览器支持的代码）。
— Makyen
@Makyen虽然OP代码在Firefox中可以正常工作，但我尝试着重于控制间隙部分，因为使用基本边框，我们无法控制间隙。我也添加了着色部分。我正在尝试使其成为通用答案。关于渐变，是的，Firefox缺乏支持，但是我敢肯定它将很快推出（我仍然感到惊讶的是，他们对此迟到了，Chrome自将近两年以来一直对此提供支持）。我链接到另一个问题以寻求更多支持的方法，但这并不是很明确。将更新它。
— Temani Afif
3

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>
展开摘要

— 三丽鸥
source
3
conic-gradient由于某种原因变得锯齿状
— sanriot
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.