如何使用 CSS conic-gradient 绘制重复的*水平*虚线？

Question

我刚刚阅读了如何使用CSS渐变绘制虚线和实线垂直线

但我不得不说，尽管一遍又一遍地阅读 MDN 文档，并阅读建议的代码，我不知道它是如何工作的。其语法令人费解。

我在该线程上提出了一个后续问题，询问如何使线条水平，但管理员认为适合删除它。

是否有任何具有忍者级 CSS 技能的人能够帮助解决这个请求，该请求应该很简单，但 CSS 标准作者却使其变得困难？ 这是要求：

我创建了一个 Codepen，在其中尝试操作该 CSS，但仅更改任何属性就会以看似不可预测的方式中断输出。

Answer 1

html {
  --c: #222; /* color */
  --t: 2px; /* thickness */
  --d: 10px; /* control the dashes */
  --g: 50px;  /* distance between vertical lines */
  --w: 150px; /* distance between horizontal lines*/
 
  background:
    conic-gradient(from 90deg at var(--t) var(--t),#0000 25%,var(--c) 0)
     0 0/var(--w) calc(4*var(--g)),
    conic-gradient(at 50% var(--t),#0000 75%,var(--c) 0)
     0 0/var(--d) var(--g);

}

这并不简单，CSS 作者并没有让这变得困难。我只是使用优化的代码，您可以使用 CSS 变量轻松控制它，但无法轻松调整以创建另一种网格。您需要一个不同的代码