如何用CSS制作带奇偶列间隙的点状网格背景？

要做出示例图里那种奇偶列点错位的点状背景，你可以通过叠加两层径向渐变背景来实现，让相邻列的点在垂直方向上错开一半间距，直接用下面的代码就能搞定：

background-image: 
  radial-gradient(circle at 1px 1px, black 1px, transparent 0),
  radial-gradient(circle at 1px 21px, black 1px, transparent 0);
background-size: 40px 40px;

如果后续需要调整间距，更灵活的写法是把垂直方向的背景尺寸设为两倍目标间距，再通过background-position让第二层背景偏移一半距离：

background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
background-size: 40px 80px;
background-position: 0 0, 0 40px;
background-repeat: repeat;

核心思路就是用两层背景分别对应错位的点，通过位置偏移形成奇偶列的间隙差异，和你要的示例效果完全匹配。

内容的提问来源于stack exchange，提问作者Yokandro