网格html{背景：#58a;背景图像：线性渐变（白色2px，透明0），线性渐变（90度，白色2px，透明0），线性渐变（hsla（0、0%、100%、.3）1px、透明0）,线性渐变(90deg,hsla(0,0%,100%,.3)1px,透明0);背景尺寸：50px50px,50px50px,10px10px,10px10px;}具体效果见链接。圆点可以用下面的代码实现：#655;background-image:radial-gradient(tan30%,transparent0);background-size:30px30px;但是如果我想实现下面的效果，原理和上面是一样的。背景：#655；背景图像：径向渐变（棕褐色30%，透明0），径向渐变（棕褐色30%，透明0）；背景大小：30px30px；背景位置：00、15px15px；具体效果见链接。需要注意的是第二层背景的偏移定位值必须是patch宽高的一半。棋盘html{背景：#eee;背景图像：线性渐变（45deg，rgba（0，0，0，.25）25％，透明0，透明75％，rgba（0，0，0，.25）0），线性渐变(45deg,rgba(0,0,0,.25)25%,透明0,透明75%,rgba(0,0,0,.25)0);背景位置：00,15px15px;背景尺寸：30px30px；}html{背景：#eee;背景图像：线性渐变（45deg，#bbb25%，透明0），线性渐变（45deg，透明75%，#bbb0），线性渐变（45deg，#bbb25%，透明0），线性-gradient(45deg,透明75%,#bbb0);背景位置：00、15px15px、15px15px、30px30px；背景尺寸：30px30px；您可以使用上述两种方法中的任何一种。其实实现原理和具体效果差不多。查看链接。使用svg方式实现棋盘效果会更简单。html{background:#eeeurl('data:image/svg+xml,\
