css3知識點總結(jié)
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() 方法，元素從其當前位置移動，根據(jù)給定的 left(x 坐標) 和 top(y 坐標) 位置參數(shù)
2.rotate:通過 rotate() 方法，元素順時針旋轉(zhuǎn)給定的角度。允許負值，元素將逆時針旋轉(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ù)進行旋轉(zhuǎn)。
2.rotateY()：通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進行旋轉(zhuǎn)。
八、CSS3過渡
通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。
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)建由當前樣式逐漸改為新樣式的動畫效果。
當您在 @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:屬性對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。
看了“css3知識點總結(jié)”的還看了：
1.大學(xué)生個人評價總結(jié)報告
2.ui專業(yè)實習(xí)報告范文
3.學(xué)習(xí)c#心得范文4篇
4.中南大學(xué)生學(xué)年鑒定表