正确写法是叠加两个方向一致的repeating-linear-gradient（横向+纵向），颜色断点与background-size严格匹配为重复单元尺寸，用transparent确保仅重叠区显色，避免实色混合或拉伸错位。
repeating-gradient 实现棋盘格背景的正确写法
直接用 repeating-gradient 做棋盘格，不是“两个线性渐变叠一起”就行，关键在颜色断点的位置和重复单元的尺寸匹配。错一点，就会出现色块拉伸、缝隙、或根本看不出格子。
- 必须用两个方向的
repeating-gradient叠加（一个横向条纹 + 一个纵向条纹），且都设为透明/不透明交替 - 每个渐变的重复长度（
repeating-linear-gradient(0deg, #000 0, #000 10px, transparent 10px, transparent 20px)）要完全一致，否则错位 - 两个渐变的起始偏移最好都从
0开始，避免因浏览器渲染精度导致首格偏移
典型写法：
background-image: repeating-linear-gradient(0deg, #000 0, #000 10px, transparent 10px, transparent 20px), repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 20px);
为什么用 transparent 而不是第二色值
用 transparent 是为了确保叠加后只有“双重重叠区”显色，其他区域保持底层颜色（比如白色背景或父容器背景）。如果用两个实色（如 #000 和 #fff），叠加结果会是混合色，不是清晰的黑白格。
-
transparent在 CSS 中参与混合时等效于 alpha=0，不会污染底层色 - 若需自定义格子色（比如灰格+白底），只需改第一个渐变里的非透明色，第二个保持
transparent - 千万别写成
repeating-linear-gradient(..., #fff 10px, #fff 20px)——这会产生实心条纹，不是空隙
常见错误：背景不显示或全是黑/白
最常踩的坑是没设 background-size，或者尺寸和渐变重复单位对不上。
- 必须显式设置
background-size: 20px 20px（数值 = 单个渐变的完整周期，如上面例子中0→20px） - 漏掉
background-size会导致浏览器按默认值（通常 100% 宽高）拉伸，格子被撑满整个容器，看起来像纯色 - 如果用了
background-position偏移，但没同步调整background-size，也会错位 - 检查是否意外覆盖了
background-color——它会盖住所有渐变层
兼容性和性能注意点
repeating-gradient 在 Chrome 26+/Firefox 16+/Safari 15.4+ 支持良好，但 IE 完全不支持，Edge 12–18 有 bug（尤其在缩放或 transform 下易错位）。
立即学习“前端免费学习笔记（深入）”；
- 移动端 Safari 对小尺寸（
）重复单元渲染不稳定，建议最小用 <code>4px起 - 比
background-image: url(...)稍重，但远轻于 canvas 绘制；复杂动画中频繁修改background-size可能触发重绘 - 如需响应式棋盘格（比如随容器缩放），别用固定像素值，改用
em或rem，并确保字体大小可控
真正麻烦的是“斜向棋盘格”或“非正方形格子”——那得换思路，repeating-gradient 天然只适合水平+垂直组合。这种时候，别硬套，该用 SVG 就用 SVG。
