如何将CSS径向渐变radial-gradient生成的红色圆点修改为正方形？

完全可以实现，你只需要把原本生成圆形红点的径向渐变替换为正方形的纯色渐变即可，修改后的代码如下：

修改后CSS代码 #

.test {
  width: 100px;
  height: 100px;
  background-image: 
    /* 替换原径向渐变，用纯色线性渐变生成1px正方形红点 */
    linear-gradient(red 0 0),
    linear-gradient(red 0 0),
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  /* 前两个红色渐变大小设为1px*1px，网格渐变保持原有尺寸 */
  background-size: 1px 1px, 1px 1px, 10px 10px, 10px 10px;
  background-position: 0 0, 5px 5px, 0 0, 0 0;
}

原有HTML代码无需修改 #

<div class="test"></div>

实现说明 #

原有红色圆点是通过radial-gradient生成的圆形图案，我们直接替换为纯色的linear-gradient，将其背景尺寸设置为1px×1px，天然就是标准正方形，再调整背景位置和原有圆点的排布完全一致，不需要改动其他网格相关的代码即可实现需求。

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