如何使用CSS創建一個點狀網格紙背景，如下圖所示？

我認為一個簡單的徑向漸變可以幫助你，尤其是避免代碼中的大量重復

body {
   /* diameter of the circle */
   --d: 4px; 
   
   background : radial-gradient(
     circle at 
        var(--d) 
        var(--d), 
        
     #000 calc(var(--d) - 1px), 
     #0000 var(--d)
   ) 
   0 0 / 50px 50px;
}

一個簡單易行的方法將是使用背景:重復-線性-梯度()；這是大多數瀏覽器都支持的。你可以在caniuse.com上查看瀏覽器支持

下面是一個有效的代碼片段:

.gridBackground {
  background: repeating-linear-gradient(transparent, transparent 2px, royalblue 2px, royalblue 22px, transparent 22px, transparent 23px, royalblue 23px, royalblue 43px),
              repeating-linear-gradient(0.25turn, transparent, transparent 2px, royalblue 2px, royalblue 22px, transparent 22px, transparent 23px, royalblue 23px, royalblue 43px);
}

/*  Reset & other Formatting CSS  */
body{
  margin: 0; padding: 0;
  width: 100vw; height: 100vh;
  color: #fff;
  font-family: monospace;
  font-size: 1.5rem;
  text-align: center;
}
.gridBackground{
  display: flex;
  align-items: center; justify-content: center;
  width: 100%; height:100%; 
}

<div class="gridBackground">
  You like Grid Backgrounds,<br/>don't you?
</div>