[分享]css3坐标画网格

CSS3可以用于画各式各样的图形，其中画网格的方法非常简单。通过CSS3的坐标系概念以及backgroundimage和backgroundsize属性，我们可以很容易地绘制不同样式的网格。/ 绘制水...

CSS3可以用于画各式各样的图形，其中画网格的方法非常简单。通过CSS3的坐标系概念以及background-image和background-size属性，我们可以很容易地绘制不同样式的网格。

/* 绘制水平网格线 */
.horizontal{
    background-image: 
    linear-gradient(to bottom, black 1px, transparent 1px),
    linear-gradient(to right, black 1px, transparent 1px);
    background-size: 100% 20px, 20px 100%;
}

/* 绘制垂直网格线 */
.vertical{
    background-image: 
    linear-gradient(to right, black 1px, transparent 1px),
    linear-gradient(to bottom, black 1px, transparent 1px);
    background-size: 20px 100%, 100% 20px;
}

/* 绘制全方位网格线 */
.grid{
    background-image: 
    linear-gradient(to bottom, black 1px, transparent 1px),
    linear-gradient(to right, black 1px, transparent 1px),
    linear-gradient(to bottom, black 1px, transparent 1px),
    linear-gradient(to right, black 1px, transparent 1px);
    background-size: 100% 20px, 20px 100%, 100% 20px, 20px 100%;
} 

以上是几种不同样式的网格的CSS代码，只需在HTML文件中使用相应的class，即可实现不同样式的网格。

此外，通过简单调整代码，还能实现诸如斑点等特殊样式的网格，给页面增添趣味性。