瀏覽器前綴
-ms- : IE瀏覽器專屬的CSS屬性需添加-ms-前綴
-ms-box-shadow:1px 1px 0 #CCC;
-moz- : 所有基于Gecko引擎的瀏覽器（如Firefox）專屬的CSS屬 性需添加-moz-前綴
-moz-box-shadow:1px 1px 0 #CCC;
-o- : Opera瀏覽器專屬的CSS屬性需添加-o-前綴
-o-box-shadow:1px 1px 0 #CCC;
-webkit- : 所有基于Webkit引擎的瀏覽器（如Chrome、Safari）專屬的CSS需添加-webkit-前綴
-webkit-box-shadow:1px 1px 0 #CCC;
CSS3 漸變
CSS3 漸變（gradient）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。 以前，你必須使用圖像來實現(xiàn)這些效果，現(xiàn)在通過使用 CSS3 的漸變（gradients）即可實現(xiàn)。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。
線性漸變
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：默認(rèn)為to bottom，即從上向下的漸變；
stop：顏色的分布位置，默認(rèn)均勻分布，例如有3個顏色，各個顏色的stop均為33.33%。
-
示例1：to left、top right、to bottom、to top
-
示例2：to right bottom、top right top、top left bottom、top left top
- 示例3：使用角度漸變linear-gradient(10deg, red, blue)
角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創(chuàng)建一個從下到上的漸變，90deg 將創(chuàng)建一個從左到右的漸變。
但是，請注意很多瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標(biāo)準(zhǔn)，即 0deg 將創(chuàng)建一個從左到右的漸變，90deg 將創(chuàng)建一個從下到上的漸變。換算公式 90 - x = y 其中 x 為標(biāo)準(zhǔn)角度，y為非標(biāo)準(zhǔn)角度
徑向漸變
徑向漸變不同于線性漸變，線性漸變是從“一個方向”向“另一個方向”的顏色漸變，而徑向漸變是從“一個點”向四周的顏色漸變
background: radial-gradient(center, shape, size, start-color, ..., last-color);
說明：
center：漸變起點的位置，可以為百分比，默認(rèn)是圖形的正中心。
shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認(rèn)為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。
size：漸變的大小，即漸變到哪里停止，它有四個值。 closest-side：最近邊； farthest-side：最遠(yuǎn)邊； closest-corner：最近角； farthest-corner：最遠(yuǎn)角。
- 示例1：多顏色節(jié)點均勻分布
div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); }
div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }
- 示例2：多顏色節(jié)點均勻分布
div { background: radial-gradient(circle, red, yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green); }
- 示例3：設(shè)置漸變形狀
circle：漸變?yōu)樽畲蟮膱A形； ellipse：根據(jù)元素形狀漸變，元素為正方形是顯示效果與circle無異
- 示例4：不同尺寸的漸變
div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black);}
重復(fù)性漸變
- 重復(fù)性線性漸變
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
- 重復(fù)性徑向漸變
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }
過渡
css3的transition允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值
- transition-property：檢索或設(shè)置對象中的參與過渡的屬性
- transition-duration：檢索或設(shè)置對象過渡的持續(xù)時間
- transition-delay：檢索或設(shè)置對象延遲過渡的時間
- transition-timing-function：檢索或設(shè)置對象中過渡的動畫類型
檢索或設(shè)置對象中過渡的動畫類型
http://cubic-bezier.com/
簡寫：
transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫類型
案例
變形屬性：transform
transform翻譯成漢語具有"變換"或者"改變"的意思。
通過此屬性具有非常強大的功能，比如可以實現(xiàn)元素的位移、拉伸或者旋轉(zhuǎn)等效果
最能體現(xiàn)transform 屬性強大實力的是實現(xiàn)元素的3D變換效果。
2D
2D變換，是在一個平面對元素進行的操作。
可以對元素進行水平或者垂直位移、旋轉(zhuǎn)或者拉伸
-
明確一下坐標(biāo)系
對上面坐標(biāo)系簡單分析如下：
（1）默認(rèn)狀態(tài)下，x軸是水平的，向右為正。
（2）默認(rèn)狀態(tài)下，y軸是垂直的，向下為正，這與傳統(tǒng)的數(shù)學(xué)坐標(biāo)系不同
2D功能函數(shù)
2D位移 translate()
- 將元素向指定的方向移動，類似于position中的relative。
- 水平移動：向右移動translate(tx,0)和向左移動translate(-tx,0)；
- 垂直移動：向上移動translate(0,-ty)和向下移動translate(0,ty);
- 對角移動：右下角移動translate(tx,ty)、右上角移動translate(tx,-ty)、左上角移動translate(-tx,-ty)和左下角移動translate(-tx,ty)。
2D縮放scale()
- 讓元素根據(jù)中心原點對對象進行縮放。默認(rèn)的值1。因此0.01到0.99之間的任何值，使一個元素縮小；而任何大于或等于1.01的值，讓元素顯得更大。
- 縮放scale()函數(shù)和translate()函數(shù)的語法非常相似，他可以接受一個值，也可以同時接受兩個值，如果只有一個值時，其第二個值默認(rèn)與第一個值相等。例如，scale(1,1)元素不會有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。
- scaleX()：相當(dāng)于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認(rèn)值是1。
- scaleY()：相當(dāng)于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認(rèn)值是１。
2D旋轉(zhuǎn)rotate()
旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)對元素根據(jù)對象原點指定一個2D旋轉(zhuǎn)。它主要在二維空間內(nèi)進行操作，接受一個角度值，用來指定旋轉(zhuǎn)的幅度。如果這個值為正值，元素相對原點中心順時針旋轉(zhuǎn)；如果這個值為負(fù)值，元素相對原點中心逆時針旋轉(zhuǎn)。
rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進行旋轉(zhuǎn)
rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進行旋轉(zhuǎn)
2D傾斜skew()
傾斜skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。
一個參數(shù)時：表示水平方向的傾斜角度；
兩個參數(shù)時：第一個參數(shù)表示水平方向的傾斜角度，第二個參數(shù)表示垂直方向的傾斜角度
變形原點
transform-origin
transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉(zhuǎn)，該屬性只有在設(shè)置了transform屬性的時候起作用；
因為我們元素默認(rèn)基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew等操作都是以元素自己中心位置進行變化的。
2D案例
?
?
?
?
本文轉(zhuǎn)自知乎號：千鋒HTML5學(xué)院
