是否可以将所有CSS网格线绘制为虚线边框或轮廓(如果允许使用JS )？

Question

对于以下CSS网格：

​

#my-css-grid {
  display: grid;
  grid-template-rows: repeat(6, 20px);
  grid-template-columns: repeat(6, 20px);
  background: #ffc;
  outline: 1px dotted orange;
}

<div id="my-css-grid">
</div>

​

我们是否可以像下面这样绘制网格线、边框或轮廓：

​

​

Google Chrome实际上是在调试检查模式下绘制它们，而Firefox和Safari则不是。(1)如果我们不能使用JavaScript，或者(2)如果可以使用JavaScript，是否可以绘制网格线？

Answer 1

如果你想确定的话。

对于容器div，您将拥有

border-top-style: dotted;
border-bottom-style: dotted;

然后，对于网格中的每个内部单元格(每行的第一个单元格除外)，您只需编写：

border-right-style: dotted;

如果你在动态构建网格，你真的不需要javascript。

我觉得我错过了这里的问题