CSS3中的網格
在這篇文章中，我們將來看一些CSS3新屬性，從而用HTML和CSS處理網格的時候更容易。但首先讓我們討論一點HTML和CSS網格的歷史，了解清楚為什么以前很困難。 網格簡史 曾幾何時，我們的布局是一團糟。表格和框架是用於創建多列布局的主要工具。雖然他們能完成工作（但其實非常糟糕）。 把目光 ...
原文：用CSS3和Canvas來畫網格
我們經常使用一些excel表格來處理數據，在html中，我們可以用table來制成表格。今天來看一下一些不同的方法。 方法一：使用CSS 的background的linear gradient屬性 linear gradient表示一種線性漸變，指定好開始的坐標，以及線性漸變的參數，就可以實現背景顏色的多變。 先來看效果圖： 看html代碼： CSS代碼： 非常簡單，如果仔細看，你就能看出它的使用 ...
2014-11-23 13:45 0 2956 推薦指數：
相關推薦
css3畫梯形
想實現的效果如下圖： 代碼： ...
css3 畫半圓和1/4圓
半圓： #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100 ...
CSS3實現畫方格
一、實現思路 需求：畫n個20 x 20的方格，作為元素div的背景圖片 思路：利用CSS3的linear-gradient。 首先設置元素的background-size為20px 20px；利用linear-gradient為元素設置漸變的背景圖片，分別向上下左右四個方向畫0.5px的線 ...
css3畫太極圖
...
css3實現畫對號動畫
目標：實現對號動畫，慢慢畫出來的感覺； 原理：外層div的背景是一個對號圖片，用一個div做遮罩，讓遮罩div層從左到右做運動一次即可實現動畫，需要注意的是遮罩div的初始位置應該在外層div的外面 ...
css3畫半圓 ， 加上一點動畫
border-radius制作半圓與制作圓形的方法是一樣的，只是元素的寬度與圓角方位要配合一致，不同的寬度和高度比例，以及圓角方位，可以制作上半圓、下半圓、左半圓和右半圓效果。例如： .semi ...
CSS3畫一個滾動的骰子
今天利用CSS3來畫一個自動滾動的骰子。 思路：骰子的六個面分別用六個ul標簽，每個面的點數就是li標簽，點數的排列采用伸縮布局，然后采用定位和transform屬性將六個面翻轉折疊成立方體。 1、HTML結構：用一個類名為box的大盒子將六個面（ul）包起來，方便給整個骰子定位和添加動畫 ...