repeating-conic-gradient画不出标准棋盘格，因其从中心辐射发散，生成的是菱形过渡区而非直角矩形；它适合旋转对称图案，强行模拟棋盘格会导致边缘不锐利、缩放失真、无法像素对齐，真正精确的棋盘格应使用repeating-linear-gradient叠加实现。
repeating-conic-gradient 为什么画不出标准棋盘格？
repeating-conic-gradient 默认从中心辐射发散，而棋盘格是平铺的矩形网格——直接用它生成“真正棋盘格”本质是反直觉的。它更适合做旋转对称图案（如色轮、放射状纹理），强行模拟棋盘格会遇到尺寸错位、边缘撕裂、缩放失真等问题。
常见错误现象：background: repeating-conic-gradient(from 0deg, #fff 0 25%, #000 0 50%) 0 0 / 20px 20px; 看起来像棋盘，但放大或滚动时会发现每个“格子”实际是四分之一圆弧拼接，角点不锐利，且无法与 background-size 精确对齐矩形网格。
真正实用的做法是：用 repeating-conic-gradient 模拟 *视觉近似* 的棋盘效果（比如做动态旋转背景），而非像素级精确复刻。
怎么让 repeating-conic-gradient 看起来像棋盘格？
关键不是“复刻”，而是利用其 4 象限重复特性，在固定尺寸内制造高对比交替区域：
- 把渐变角度范围控制在
0deg到90deg，并重复 4 次（即一个完整圆周） - 每
25%切换一次颜色，确保相邻象限颜色相反 -
background-size必须设为偶数倍的单个“伪格子”边长，否则平铺错位 - 推荐起始写法：
background: repeating-conic-gradient(from 0deg, #fff 0 25%, #000 0 50%, #fff 0 75%, #000 0 100%) 0 0 / 40px 40px;
注意：这里的 40px 40px 是整个重复单元尺寸，不是单格大小；每个“伪格子”视觉宽度 ≈ 20px，但它是菱形过渡区，非硬边矩形。
和 linear-gradient 实现的真正棋盘格比，差在哪？
repeating-linear-gradient 可以生成像素对齐、缩放稳定、打印友好的真实棋盘格，例如：
background: repeating-linear-gradient(0deg, #000, #000 10px, transparent 10px, transparent 20px), repeating-linear-gradient(90deg, #000, #000 10px, transparent 10px, transparent 20px);
而 repeating-conic-gradient 版本：
- 边缘始终带轻微弧度，CSS 无法强制“截断”为直角
- 缩放到非整数倍时，中心点偏移会导致图案漂移
- 在
transform: scale()或高 DPI 屏幕下，锯齿更明显 - 无法配合
background-origin或background-clip精确控制绘制区域
如果你需要响应式适配、打印输出或与其他 background 图层叠加对齐，repeating-conic-gradient 不是可靠选择。
什么场景下值得用 conic-gradient 做棋盘效果？
只有当你要叠加动态旋转、或需要和其它锥形渐变混合时，才考虑它：
- 给容器加一层缓慢旋转的“幻觉棋盘”背景：
animation: spin 20s linear infinite;配合@keyframes spin { to { background-position: 360deg 360deg; } } - 作为 mask-layer 配合
mask-image做放射状遮罩，再叠在真实棋盘上增强层次 - 在 CSS @property 控制的 hue 动画中，用锥形渐变实现色相循环的“流动棋盘”感
纯静态、需精确对齐的 UI 背景，别碰 repeating-conic-gradient —— 它不是为这个设计的。真正麻烦的地方在于，调试时看不出问题，上线后在某台 Retina 屏或某个 zoom 比例下才暴露边缘模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
