使用CSS3绘制网格线 | Tencent AlloyTeam

话说昨天在写在线素描的时候，想着给画布加上些网格，就跟PS里面的一样。但是用canvas画是不行的（注：不是它不行……），图片又让我不齿，就作罢了。

今天想着要不尝试着用CSS3画一个，找了些资料，看了下CSS3的所有属性，竟然也被我找到画网格的方法了，喔～哇哈哈哈～～

这些属性就是——linear-gradient、background-size，大家鼓掌欢迎他们～

那到底要怎么做呢？我们暂时不考虑网格，先想想，怎么画一条横线呢？

……（10分钟过去鸟）

好，看下面的代码（只贴了webkit的实现，其他的太多，不想写，下同～ <_<）：

Css

1 2 3 4

.grid{     background:         -webkit-linear-gradient(top, transparent 39px, blue 40px); }

它的效果是酱紫滴：

前面39px的都是透明的，那只要让40px之后的也是透明的或者看不到不就成了一条线了么。这时background-size就上场咯。何谓background-size？w3cschool如是说：

The background-size property specifies the size of the background images.

也就是指定背景图片（渐变也是个图片）的大小。比如说一张100 x 100的图片，可以用这个属性指定只显示其中的30 x 20（纯属举例）。这里把水平限制设置为100%（也就是不限制），垂直方向限制成只显示40px的范围。这样就会漏出1像素的蓝色，看上去就成了一条线了。

Css

1 2 3 4 5

.grid{     background:         -webkit-linear-gradient(top, transparent 39px, blue 40px);         background-size: 100% 40px; }

可以看到，当不设置背景平铺的时候，横线就出来了吧。加上repeat之后，hoho，就成了信纸咯～

那么，接下来的事就容易过剃头啦（么剃头很容易么）！利用CSS3的多重背景，依个葫芦画个瓢再加个垂直的竖线，就搞定咯。完整的代码如下：

Css

1 2 3 4 5 6 7

.grid{     background:         -webkit-linear-gradient(top, transparent 39px, blue 40px),         -webkit-linear-gradient(left, transparent 39px, blue 40px)         ;     background-size: 40px 40px; }

呼～大功告成！如果你的浏览器支持CSS3，可以到这里查看live demo。不过这个网格是不是有点单调？如果你够创意，可以整成更炫哦～比如说：2px宽，颜色相间的网格——

嗯，剩下的就各位自由发挥了，hoho～～