CSS3画网格需要用到的属性就是——linear-gradient、background-size,大家鼓掌欢迎他们~
那到底要怎么做呢?我们暂时不考虑网格,先想想,怎么画一条横线呢?
好,看下面的代码(只贴了webkit的实现,其他的太多,不想写,下同~ <_<):
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像素的蓝色,看上去就成了一条线了。
1
2
3
4
5
|
.grid{
background
:
-webkit-linear-gradient(
top
,
transparent
39px
,
blue
40px
);
background-
size
:
100%
40px
;
}
|
可以看到,当不设置背景平铺的时候,横线就出来了吧。加上repeat之后,hoho,就成了信纸咯~
那么,接下来的事就容易过剃头啦(么剃头很容易么)!利用CSS3的多重背景,依个葫芦画个瓢再加个垂直的竖线,就搞定咯。完整的代码如下:
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~~