CSS3學習總結

CSS3 邊框

• border-radius  用於建立圓角
• box-shadow  用於向方框添加陰影
• border-image  能夠使用圖片來建立邊框

CSS3 背景

• background-size  規定背景圖片的尺寸
• background-origin  規定背景圖片的定位區域

CSS3 文本效果

• text-shadow  可向文本應用陰影
• word-wrap  容許強制文本換行

CSS3 @font-face 規則

　　在新的 @font-face 規則中，您必須首先定義字體的名稱（好比 myFirstFont），而後指向該字體文件。

如需爲 HTML 元素使用字體，請經過 font-family 屬性來引用字體的名稱 (myFirstFont)

CSS3 2D 轉換

2D Transform 方法

transform

向元素應用 2D 或 3D 轉換。

函數	描述
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
translate(x,y)	定義 2D 轉換，沿着 X 和 Y 軸移動元素。
translateX(n)	定義 2D 轉換，沿着 X 軸移動元素。
translateY(n)	定義 2D 轉換，沿着 Y 軸移動元素。
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n)	定義 2D 縮放轉換，改變元素的寬度。
scaleY(n)	定義 2D 縮放轉換，改變元素的高度。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿着 X 和 Y 軸。
skewX(angle)	定義 2D 傾斜轉換，沿着 X 軸。
skewY(angle)	定義 2D 傾斜轉換，沿着 Y 軸。

CSS3 3D 轉換

translate3d(x,y,z)	定義 3D 轉化。
translateX(x)	定義 3D 轉化，僅使用用於 X 軸的值。
translateY(y)	定義 3D 轉化，僅使用用於 Y 軸的值。
translateZ(z)	定義 3D 轉化，僅使用用於 Z 軸的值。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	定義 3D 縮放轉換，經過給定一個 X 軸的值。
scaleY(y)	定義 3D 縮放轉換，經過給定一個 Y 軸的值。
scaleZ(z)	定義 3D 縮放轉換，經過給定一個 Z 軸的值。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿 X 軸的 3D 旋轉。
rotateY(angle)	定義沿 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿 Z 軸的 3D 旋轉。
perspective(n)	定義 3D 轉換元素的透視視圖。

CSS3 過渡

屬性	描述	CSS
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。默認是 0。	3
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。	3
transition-delay	規定過渡效果什麼時候開始。默認是 0。	3

CSS3 動畫

當您在 @keyframes 中建立動畫時，請把它捆綁到某個選擇器，不然不會產生動畫效果。

經過規定至少如下兩項 CSS3 動畫屬性，便可將動畫綁定到選擇器：

• 規定動畫的名稱
• 規定動畫的時長

屬性	描述	CSS
@keyframes	規定動畫。	3
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
animation-name	規定 @keyframes 動畫的名稱。	3
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。	3
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。	3
animation-delay	規定動畫什麼時候開始。默認是 0。	3
animation-iteration-count	規定動畫被播放的次數。默認是 1。	3
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。	3
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。	3
animation-fill-mode	規定對象動畫時間以外的狀態。	3

CSS3 多列

屬性	描述	CSS
column-count	規定元素應該被分隔的列數。	3
column-fill	規定如何填充列。	3
column-gap	規定列之間的間隔。	3
column-rule	設置全部 column-rule-* 屬性的簡寫屬性。	3
column-rule-color	規定列之間規則的顏色。	3
column-rule-style	規定列之間規則的樣式。	3
column-rule-width	規定列之間規則的寬度。	3
column-span	規定元素應該橫跨的列數。	3
column-width	規定列的寬度。	3
columns	規定設置 column-width 和 column-count 的簡寫屬性。	3

CSS3 用戶界面

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

屬性	描述	CSS
appearance	容許您將元素設置爲標準用戶界面元素的外觀	3
box-sizing	容許您以確切的方式定義適應某個區域的具體內容。	3
icon	爲創做者提供使用圖標化等價物來設置元素樣式的能力。	3
nav-down	規定在使用 arrow-down 導航鍵時向何處導航。	3
nav-index	設置元素的 tab 鍵控制次序。	3
nav-left	規定在使用 arrow-left 導航鍵時向何處導航。	3
nav-right	規定在使用 arrow-right 導航鍵時向何處導航。	3
nav-up	規定在使用 arrow-up 導航鍵時向何處導航。	3
outline-offset	對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。	3
resize	規定是否可由用戶對元素的尺寸進行調整。	3