【问题标题】：Making a dotted grid with CSS使用 CSS 制作虚线网格
【发布时间】：2019-03-27 20:01:58
【问题描述】：

我希望整个body 有一个虚线网格

body {
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
}

问题是我想移动它，以便在点 (0, 0) 上放置一个点，即body 的左上角。所以整个结构应该转移到-20px, -20px。或者可能有更好的解决方案？

【问题讨论】：

标签： css background-image radial-gradients

【解决方案1】：

更新

以下解决方案有效，但仅适用于固定的background-size。请参阅@Temani Afif's answer 以获得更好的解决方案。

回答

您可以使用background-position CSS 属性完全按照您的想法进行操作。

body {
  background: white;
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
  background-position: -19px -19px;
}

【讨论】：

谢谢，这正是我想要的！！奇怪的是，我试过了，把它放在整个代码上面，还是不行。
在您的情况下，您正在使用background shorthand property，您可以提供大量参数。如果您将background-position 属性（或任何其他特定的背景属性）放在background 速记属性之前，那么它将被填充默认值的速记属性覆盖。重要的是，在您使用速记属性的任何地方首先设置它，然后设置任何特定属性。其他速记属性示例包括animation、flex、transition 等。
非常感谢您的解释！确实，我忘记了background 的人手不足。

【解决方案2】：

除了更改 background-position 之外，还有另一种方法，无论大小如何：

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

body {
  background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
  background-size: 50px 30px;
}

基本上这个想法是将background-size定义的区域内的点的位置更改为顶部/左侧，而不是移动所有背景

【讨论】：

非常好！你能解释一下at 2px 2px和1px的意思吗？
@EugeneBarsky 1px 基本上是圆的半径（因为我们使用的是径向渐变）所以我应该将圆的中心放在2px 2px，它也可以是@987654330 @, 应该给出相同的结果.. 这是一个更大的示例，以便更好地查看：jsfiddle.net（半径 10px，我们将中心放置在 10px 10px）
@EugeneBarsky 编辑了答案以避免混淆，所以我们把它放在1px 1px 这是半径......当然你可以把它放在你想要的地方（最初我把它做成 2px 2px它离边缘有点远）
感谢您的解释！不幸的是，jsfiddle 的链接不起作用。