一、先上效果圖
二、再上**
1、單位
樣式中用到了三種不常用的單位，vh、vmax和em。下面分別介紹一下這幾個單位以及和他們相關的單位。
1）vw、vh、vmin、vmax是一種視窗（viewport）單位，是相對單位，由視窗的大小決定。
2）em和rem也是相對單位，是根據font-size的值來計算的，預設為16px。
2、透視屬性
1）perspective表示元素距離檢視的距離。當元素設定perspective屬性時，其子元素會獲得透視效果，而不是元素本身。
2）perspective-origin接受兩個值，預設為50% 50%。
3、3d轉換
1）transform，當定義2d轉換時，可以接受6個值的矩陣；當定義3d轉換時，可以接受4*4=16個值的矩陣。以3d轉換為例，使用最多的即為在x、y、z方向上的平移、縮放和旋轉。**中的transform: rotatex(90deg) translatez(-12em);即代表沿x軸旋轉90度，沿z軸平移-12em。
2）transform-style定義如何在3d空間中呈現被巢狀元素，預設值為flat，表示子元素不保留其3d位置。**中設定transform-style: preserve-3d;表示保留子元素的3d位置。
4、網格背景
1）radial-gradient徑向漸變，指從乙個點到向四周的顏色漸變，可以接受n個引數。
後面的引數依次為想要漸變的顏色，在顏色後面增加百分數可以實現不均勻漸變。**中的radial-gradient(rgba(0, 0, 0, 0) 50%, #000000 70%)省略了第乙個引數，表示從中心開始，到50%的地方是透明漸變，到70%的地方是黑色漸變，直到最遠角結束
2）linear-gradient線性漸變，指從乙個方向到另乙個方向的顏色漸變，可以接受n個引數。
3）background-size，表示背景尺寸。**中background-size: 100%, 3em 3em, 3em 3em;三組值分別對background中的三種漸變進行大小設定，線性漸變的背景大小為3em，repeat平鋪後，即生成效果圖所示的網格效果。
css實現網格背景
只使用乙個漸變時，我們能建立的圖案並不多，當我們把多個漸變圖案組合起來，讓他們透過彼此的透明區域顯現時，神奇的事情就發生了！我們首先想到的是把水平和水質條紋疊加起來，就可以得到各種各樣的網格。1.網格背景 html div class stripe div css stripe效果圖 2.波點背景 ...
CSS實現特殊背景效果
css3的出現使得一些以前需要用的背景效果也可以直接用css實現，今天分享一下三個用css3做的特殊背景。這三個例子都使用到了css3的線性漸變。下面以webkit引擎下的線性gradient用法為例 webkit linear gradient 最新線性漸變寫法 webkit gradient 老...
css3實現網格效果
利用background image裡的liner gradient屬性可以實現一些簡單的css網格背景，能自適應背景，挺實用的，下面就簡單的介紹兩款網格背景 1.桌布花紋 紅.png 塊height 300px width 300px background white background ima...