CSS3知識點復(fù)習(xí)整理

　　一、css3模塊

　　1.選擇器 2.框模型 3.背景和邊框 4.文本效果 5.(2D、3D)轉(zhuǎn)換 6.動畫 7.多列布局 8.用戶界面

　　二、css3邊框

　　1.border-radius

　　2.box-shadow

　　3.border-image

　　三、css3背景

　　1.background-size

　　2.background-origin

　　3.background-clip

　　四、文本效果

　　1.text-shadow

　　2.word-wrap

　　五、css3字體

　　@font-face網(wǎng)絡(luò)字體，可自行更改。

　　六、2D轉(zhuǎn)換

　　1.translate:通過 translate() 方法，元素從其當(dāng)前位置移動，根據(jù)給定的 left(x 坐標(biāo)) 和 top(y 坐標(biāo)) 位置參數(shù)

　　2.rotate:通過 rotate() 方法，元素順時針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時針旋轉(zhuǎn)。

　　3.scale:通過 scale() 方法，元素的尺寸會增加或減少，根據(jù)給定的寬度(X 軸)和高度(Y 軸)參數(shù)

　　4.skew:通過 skew() 方法，元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線(X 軸)和垂直線(Y 軸)參數(shù)

　　5.matrix:matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。matrix() 方法需要六個參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動以及傾斜元素。

　　七、3D轉(zhuǎn)換

　　1.rotateX()：通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。

　　2.rotateY()：通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。

　　八、CSS3過渡

　　通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時為元素添加效果。

　　CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。

　　要實現(xiàn)這一點，必須規(guī)定兩項內(nèi)容：

　　1.規(guī)定您希望把效果添加到哪個 CSS 屬性上

　　2.規(guī)定效果的時長

　　九、CSS3動畫

　　通過 CSS3，我們能夠創(chuàng)建動畫，這可以在許多網(wǎng)頁中取代動畫圖片、Flash 動畫以及 JavaScript。

　　@keyframes 規(guī)則用于創(chuàng)建動畫。在 @keyframes 中規(guī)定某項 CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果。

　　當(dāng)您在 @keyframes 中創(chuàng)建動畫時，請把它捆綁到某個選擇器，否則不會產(chǎn)生動畫效果。

　　通過規(guī)定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：

　　規(guī)定動畫的名稱

　　規(guī)定動畫的時長

　　動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

　　請用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。

　　0% 是動畫的開始，100% 是動畫的完成。

　　為了得到最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。

　　您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。

　　十、css3多列

　　1.column-count:column-count 屬性規(guī)定元素應(yīng)該被分隔的列數(shù)

　　2.columm-gap:column-gap 屬性規(guī)定列之間的間隔

　　3.column-rule:column-rule 屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。

　　十一、css3用戶界面

　　在 CSS3 中，新的用戶界面特性包括重設(shè)元素尺寸、盒尺寸以及輪廓等。

　　1.resize: 屬性規(guī)定是否可由用戶調(diào)整元素尺寸。

　　2.box-sizing:屬性允許您以確切的方式定義適應(yīng)某個區(qū)域的具體內(nèi)容。

　　3.outline-offset:屬性對輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。

　　看了“css3知識點總結(jié)”的還看了：

1.大學(xué)生個人評價總結(jié)報告

2.ui專業(yè)實習(xí)報告范文

3.學(xué)習(xí)c#心得范文4篇

4.中南大學(xué)生學(xué)年鑒定表