那些遇到过的问题

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

16 html javascript css

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

虽然通过这个过程可以显示虚线圆圈，但是虚线的末端和起点之间的间隙变窄了，并且间隙不均匀。

.c {
  width: 500px;
  height: 500px;
  border-width: 15px;
  border-style: dashed;
  border-radius: 600px;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="c"></div>
Run Code Online (Sandbox Code Playgroud)

有没有办法使间隙均匀？我们也可以控制破折号之间的差距吗？

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

Tem*_*fif 15

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

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --c:#000; /* color of dashes */
  width: 180px;
  display:inline-block;
  border-radius:50%;
  border:2px solid transparent; /* control the thickness of border*/
  background: 
    linear-gradient(#fff,#fff) padding-box padding-box,
    repeating-conic-gradient(
        var(--c)    0 calc(360deg/var(--n) - var(--d)), 
        transparent 0 calc(360deg/var(--n)) 
    ) border-box;
}

/* keep the element square */
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="box"></div>

<div class="box" style="--n:20;border-width:5px;width:150px"></div>

<div class="box" style="--n:8;--d:20deg;border-width:5px;width:150px"></div>

<div class="box" style="--n:10;--d:15deg;border-width:3px;width:100px"></div>

<div class="box" style="--n:10;--d:20deg;border-width:3px;width:100px"></div>
Run Code Online (Sandbox Code Playgroud)

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

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --c:#000; /* color of dashes */
  --b:2px;   /* control the thickness of border*/
  
  width: 180px;
  display:inline-block;
  border-radius:50%;
  background: 
    repeating-conic-gradient(
        var(--c)    0 calc(360deg/var(--n) - var(--d)), 
        transparent 0 calc(360deg/var(--n)));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px));
}

/* keep the element square */
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}


body {
  background:linear-gradient(to right,yellow,pink);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="box"></div>

<div class="box" style="--n:20;--b:5px;width:150px;--c:blue"></div>

<div class="box" style="--n:8;--d:20deg;--b:10px;width:130px;--c:red"></div>

<div class="box" style="--n:18;--d:12deg;--b:8px;width:100px;--c:green"></div>

<div class="box" style="--n:10;--d:20deg;--b:3px;width:100px;--c:purple"></div>
Run Code Online (Sandbox Code Playgroud)

具有均匀空间的 CSS 虚线圆圈

为了让事情变得有趣，我们甚至可以考虑对破折号进行更复杂的着色：

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --b:2px;   /* control the thickness of border*/
  
  width: 180px;
  display:inline-block;
  border-radius:50%;
  background:linear-gradient(red,blue);
  -webkit-mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
  -webkit-mask-composite: source-in;
          mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
          mask-composite: intersect;
}

/* keep the element square */
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}


body {
  background:linear-gradient(to right,yellow,pink);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="box"></div>

<div class="box" style="--n:20;--b:5px;width:150px;background:conic-gradient(green,orange,black)"></div>

<div class="box" style="--n:8;--d:20deg;--b:10px;width:130px;background:conic-gradient(black,white,black)"></div>

<div class="box" style="--n:18;--d:12deg;--b:8px;width:100px;background:linear-gradient(60deg,red 50%,green 0)"></div>

<div class="box" style="--n:10;--d:20deg;--b:3px;width:100px;background:#fff"></div>
Run Code Online (Sandbox Code Playgroud)

带有圆锥渐变和蒙版的透明 CSS 破折号

您可能肯定想要一些内容，以便更好地在伪元素上应用遮罩/背景以避免遮罩内容：

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --b:2px;   /* control the thickness of border*/
  
  width: 180px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-size:35px;
  border-radius:50%;
  position:relative;
}
.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--c,linear-gradient(red,blue));
  -webkit-mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
  -webkit-mask-composite: source-in;
          mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
          mask-composite: intersect;
  
}

/* keep the element square */
.box:before {
  content:"";
  padding-top:100%;
}


body {
  background:linear-gradient(to right,yellow,pink);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="box">19</div>

<div class="box" style="--n:20;--b:5px;width:150px;--c:conic-gradient(green,orange,black)">17</div>

<div class="box" style="--n:8;--d:20deg;--b:10px;width:130px;--c:conic-gradient(black,white,black)">5</div>

<div class="box" style="--n:18;--d:12deg;--b:8px;width:100px;--c:linear-gradient(60deg,red 50%,green 0)">9</div>

<div class="box" style="--n:10;--d:20deg;--b:3px;width:100px;--c:#fff">13</div>
Run Code Online (Sandbox Code Playgroud)

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

使用 SVG 你还需要一些计算来确保你有一个统一的间距：

svg {
  width:200px;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

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

svg {
  --n:20; /* number of dashes*/
  --d:5;  /* distance */
  width:200px;
}

svg circle {
   stroke-dasharray:calc((2*3.14*50)/var(--n) - var(--d)), var(--d); 
}
Run Code Online (Sandbox Code Playgroud) 
<svg viewBox="-3 -3 106 106">
  <circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" />
</svg>

<svg viewBox="-3 -3 106 106" style="width:150px;--n:20;--d:10">
  <circle cx="50" cy="50" r="50" fill="transparent" stroke="red"   stroke-width="5" />
</svg>

<svg viewBox="-3 -3 106 106" style="width:100px;--n:8;--d:15">
  <circle cx="50" cy="50" r="50" fill="transparent" stroke="green" stroke-width="5" />
</svg>
Run Code Online (Sandbox Code Playgroud)

SVG 统一空间破折号

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

.box {
  display:inline-block;
  width:200px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-3 -3 106 106"><circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" style="stroke-dasharray:29.25, 10" /></svg>') center/contain;
}

.box:before {
  content:"";
  display:block;
  padding-top:100%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="box">

</div>

<div class="box" style="width:150px;">

</div>

<div class="box" style="width:100px;">

</div>
Run Code Online (Sandbox Code Playgroud)

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

.box {
  display:inline-block;
  width:200px;
  position:relative;
}

.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background:var(--c,red);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-3 -3 106 106"><circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" style="stroke-dasharray:29.25, 10" /></svg>') center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-3 -3 106 106"><circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" style="stroke-dasharray:29.25, 10" /></svg>') center/contain;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="box">

</div>

<div class="box" style="width:150px;--c:linear-gradient(60deg,green 50%,yellow 0);">

</div>

<div class="box" style="width:100px;--c:linear-gradient(red,blue)">

</div>
Run Code Online (Sandbox Code Playgroud)

具有均匀空间的SVG虚线边框

san*_*iot 3

与 SVG 一起使用stroke-dasharray。

svg {
  width: 20vmax;
  height: 20vmax;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

或者您可以在没有 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%);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="c"></div>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

2481 次

最近记录：

5 年，6 月 前
CSS Only Pie Chart - 如何在切片之间添加间距/填充？ 6
更多相关链接
相关归档
VueJS有条件地添加元素的属性 81
Angular ReactiveForms:生成一个复选框值数组？ 80
使用create-react-app命令npm启动错误 58
以编程方式点击<a> -tag在Firefox中不起作用 49
"window.location.href"和"window.location.hash"有什么区别？ 44
如何构建Redux组件/容器 43
如何使用knitr导入本地图像以进行降价 38
将数组绑定到AngularJS中的指令变量 32
'hidden'属性不适用于flex-box 19
如何在Meteor中使用多个CSS文件 16
难疑归档
"yield"关键字有什么作用？ 9664
为什么减去这两次(在1927年)给出一个奇怪的结果？ 6628
如何修改指定的提交？ 2077
获取屏幕大小,当前网页和浏览器窗口 1927
如何检查变量是否是JavaScript中的数组？ 1713
在视图控制器之间传递数据 1340
Pythonic方式创建一个长多行字符串 1160
为PHP密码保护哈希和盐 1142
活动已泄露最初添加的窗口 1117
我必须在何处以及为何要使用"模板"和"typename"关键字？ 1061