我們經常使用一些excel**來處理資料，在html中，我們可以用table來製成**。今天來看一下一些不同的方法。
方法一：使用css3的background的linear-gradient屬性
linear-gradient表示一種線性漸變，指定好開始的座標，以及線性漸變的引數，就可以實現背景顏色的多變。
先來看效果圖：
看html**：
<css**：div
class
="grid"
>
div>
div,canvas.grid非常簡單，如果仔細看，你就能看出它的使用規律。這裡要注意，我使用的是chrome瀏覽器，如果在相容多種瀏覽器，需要在linear-gradient加上相對應的字首，比如ie：-ms-linear-gradient，firefox：-moz-linear-gradient，opera：-o-linear-gradient。
另外，我們注意到，雖然在css**中，我們是先寫橫線的樣式，再寫豎線的樣式的，但是，當縱向的線和橫向的線相交時，在相交部分，橫向的線是在縱向的線之上的。反之，則縱向的線會在橫向的線之上。（什麼原因暫時還不清楚）。
現在我們用canvas的方法實現一遍，效果如上圖所示。
html**：
<js**：canvas
>
canvas
>
var canvas = document.getelementsbytagname('canvas')[0];
canvas.width = 400;
canvas.height = 280;
if(canvas.getcontext)
//再畫縱線
for( var j = 1; j * 40 < width; j++)
}
在js**中，我們通過畫簡單的直線來實現了這個效果，但是注意，這裡的效果暫時還和預期的有點出入：
橫線和縱線相交時，縱線在上，這是因為我們在**中，先畫橫線，再畫縱線，所以很自然就會有這樣的效果。
如果我們要達到預期的效果，有兩種解決方案：
方案一：將畫線的兩個for迴圈的順序調轉過來，變成先畫豎線，再畫橫線，則可以達到預期的效果。
ctx.globalcompositeoperation = 'destination-over';它表示，當線與線之間出現重疊時，重疊部分採用後來畫的線的樣式。
具體ctx.globalcompositeoperation的用法可以參考 這個
用css3和canvas實現的蜂窩動畫效果
近期工作時研究了一下css3動畫和js動畫。主要是工作中為了增強頁面的趣味性，大家都有意無意的加入了非常多動畫效果。當然大部分都是css3動畫效果。能夠gpu加速，這會降低移動端的效能需求。今天主要說的是蜂窩效果。詳細效果大家等下能夠執行源 這裡就不放gif圖了。css3的原理非常easy，就是通過...
用CSS3來製作倒影（box reflect）
有一句話說的好 橫看成嶺側成峰，遠近高低各不同 有些時候，我們需要從不同的角度去欣賞mm，如下圖 在早期，要實現這種效果，我們只能乖乖的找設計去製作，然後在頁面上插入一張，但是隨著css3的出現，我們可以純 實現，如何實現呢？就是通過css3的box reflect屬性。相容性 接下來，我們來了解b...
用CSS3來代替JS實現互動
css3和js 對於css了解的同學都知道，css的實現是最底層的，在實現方式和效能上都不是，js這種提供介面的指令碼可比的 從css3的動畫和js動畫對比角度來看兩者，會更清晰 而且隨著前端框架的使用，頁面動畫會越來越多的應用css3 css3的其他用法 除了動畫的代替，還有就是對於各種互動的實現...