一、linear-gradientlinear-gradient可以说是最早实现这种效果的应用。当然，实现上也是最巧妙、最复杂的。原理就是画两个直角三角形，然后拼接在一起。下面最小的拼接单元其实就是这样一个图。45deg方向的梯度是为了便于观察。以下所有演示的颜色和尺码都经过特殊处理，下同。bg{background-image:linear-gradient(45deg,#eee25%,transparent25%,transparent75%,#eee75%)}这样平铺，然后再画一个一样的。一张动图完整展现执行过程。以下为完整代码。bg{width:400px;height:300px;background-image:linear-gradient(45deg,#eee25%,transparent25%,transparent75%,#eee75%),linear-gradient(45deg,#eee25%,transparent25%,transparent75%,#eee75%);background-size:16px16px;background-position:00,8px8px;}二、repeating-linear-gradientrepeating-linear-gradient也可以实现一个“棋盘”的效果，也比较容易理解，但是需要一点额外的trick_前端训练先画一个横条纹pattern.bg{background-image:repeating-linear-gradient(#eee08px,transparent016px)}然后画一个垂直的stripe.bg{background-image:repeating-linear-gradient(#eee08px,transparent016px),repeating-linear-gradient(90deg,#eee08px,transparent016px)如果它是灰色的，看起来这是交错条纹重叠的地方。在这种情况下，您可以考虑添加背景混合模式。这里我们使用“屏幕颜色（screen）”，可以过滤掉黑色部分，如果是浅灰色，剩下的颜色几乎就是“白色”。如下图，“棋盘”效果就出来了（微信压缩太厉害了）。bg{background-blend-mode:screen;}下面是动图来完整表达实现过程。下面是完整的代码。bg{width:400px;height:300px;background-image:repeating-linear-gradient(#eee08px,transparent016px),repeating-linear-gradient(90deg,#eee08px,transparent016px);background-blend-mode:screen;}而且这个方法可以实现任意倾斜角度的效果。例如，混合模式有很多限制。目前，它在这种浅灰色中看起来很好。如果您更改另一种颜色，它可能不起作用。比如这是需要根据实际情况酌情使用。3.conc-gradientconc-gradientconicalgradient可以算是官方的解决方案（MDN上有这样的棋盘案例），但是兼容性稍微差一点。我们用一张动图来完成下面是性能实现过程的完整代码bg{width:400px;height:300px;background-image:conic-gradient(#eee025%,transparent050%,#eee075%,transparent0);background-size:16px16px;}其实也可以用repeating-conic-gradient来优化（原理是一样的，所以归为同一个方法），而后两种颜色与前两种颜色重复，所以只用两种颜色就可以实现.bg{width:400px;height:300px;background-image:repeating-conic-gradient(#eee025%,transparent050%);background-size:16px16px;}这个应该算是一个纯CSS的解决方案all_web前端培训最精简的4.其实这些可能用不到。尽管CSS渐变可以巧妙地实现这些模式，但它们在正常工作中可能无法实现。直接把图片切下来就好了，比如直接在Figma里画个SVG这样直接用这张图。bg{宽度：400px;height:300px;background-image:url('xxx.svg');background-size:16px16px;}这样的“棋盘”效果不到10秒就搞定了，简单快速，没有兼容性问题吧？CSS渐变鸡肋？当然不是！CSS渐变是动态绘制的，您可以动态调整颜色、大小或形状，这是静态图像无法实现的。比如怕是需要保存多张图片，但是对于渐变，只要改变一个颜色值就可以了。bg{width:400px;height:300px;background-image:repeating-conic-gradient(var(--color)025%,transparent050%);background-size:16px16px;}.bg1{--color1:gray;}.bg2{--color1:yellow;}.bg1{--color1:blue;}更多最重要的一点是，学习掌握渐变对提高自己的CSS水平很有帮助。但是，也需要根据实际情况而定。如果你不需要动态改变一些样式，SVG图像也是一个好方法，但不要停止思考。文章来自程序员成长指南
