巧妙使用CSS3.0背景渐变制作棋盘格效果
的有关信息介绍如下:
linear-gradient是CSS3.0新增一个属性,它可以用来制作渐变效果,今天我们使用它实现一个棋盘格效果,如图:
首先我们先完成一个盒子的基本样式,代码和效果如下图:
接下来我们开始使用linear-gradient开始渐变,这里要注意渐变的参数,添加代码后的效果如下图:
在原来渐变的基础上再添加一层渐变,这里面要改变渐变的方向,两重渐变执行后就实现了棋格的一个单元,代码和效果如下图:
这一步很关键,要实现棋盘格效果,我们只需要再添加一个background-size属性,设置一下背景的大小,最终实现我们需要的效果,代码和效果图如下图:



