如何使用CSS制作虚线网格纸样式背景

AI 小北

2026-4-22

如何使用CSS制作虚线网格纸样式背景

嘿，我来帮你搞定这个虚线网格的问题！你当前的代码已经能画出网格，但因为用的是单段渐变（只有1px的颜色段+透明），所以是实线。要改成虚线其实只需要调整渐变的颜色分段，让颜色和透明交替出现就行啦。

核心思路是：用渐变创建「颜色小段+透明间隔」的重复单元，这样平铺后就会形成虚线效果。这里有两种实现方式，都很简单：

方式一：调整普通linear-gradient的分段

直接修改你原来的渐变代码，给颜色和透明设置多个节点，模拟虚线的线段和间隔：

background-size: 100px 100px;
background-image: 
  linear-gradient(to right, #f0f0f0 2px, transparent 2px, transparent 10px),
  linear-gradient(to bottom, #f0f0f0 2px, transparent 2px, transparent 10px);
background-position: top center;

参数说明：

#f0f0f0 2px：定义虚线的线段长度（这里是2px）
transparent 2px, transparent 10px：定义线段后的透明间隔（这里是8px，从2px到10px的区间都是透明）
你可以根据需求调整这些数值，比如把2px改成1px、10px改成8px，就能得到更细更密的虚线。

方式二：用repeating-linear-gradient更简洁

如果想要写法更直观，可以用repeating-linear-gradient，它会自动重复你定义的渐变单元，代码看起来更清晰：

background-size: 100px 100px;
background-image: 
  repeating-linear-gradient(to right, #f0f0f0 0, #f0f0f0 2px, transparent 2px, transparent 10px),
  repeating-linear-gradient(to bottom, #f0f0f0 0, #f0f0f0 2px, transparent 2px, transparent 10px);
background-position: top center;

这个写法和方式一效果完全一致，只是用重复渐变来自动平铺单元，逻辑上更贴合虚线的重复特性。