話說昨天在寫在線素描的時候，想著給畫布加上些網(wǎng)格，就跟PS里面的一樣。但是用canvas畫是不行的（注：不是它不行……），圖片又讓我不齒，就作罷了。
今天想著要不嘗試著用CSS3畫一個，找了些資料，看了下CSS3的所有屬性，竟然也被我找到畫網(wǎng)格的方法了，喔～哇哈哈哈～～
這些屬性就是——linear-gradient、background-size，大家鼓掌歡迎他們～
那到底要怎么做呢？我們暫時不考慮網(wǎng)格，先想想，怎么畫一條橫線呢？
……（10分鐘過去鳥）
好，看下面的代碼（只貼了webkit的實現(xiàn)，其他的太多，不想寫，下同～ <_<）：
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。不過這個網(wǎng)格是不是有點單調？如果你夠創(chuàng)意，可以整成更炫哦～比如說：2px寬，顏色相間的網(wǎng)格——
嗯，剩下的就各位自由發(fā)揮了，hoho～～
聯(lián)系客服
