CSS3 速查

CSS3 速查

 

1.新的邊框屬性

屬性	描述	CSS
border-image	設置所有 border-image-* 屬性的簡寫屬性。	3
border-radius	設置所有四個 border-*-radius 屬性的簡寫屬性。	3
box-shadow	向方框添加一個或多個陰影。	3

 

2.新的背景屬性

屬性	描述	CSS
background-clip	規定背景的繪製區域。	3
background-origin	規定背景圖片的定位區域。	3
background-size	規定背景圖片的尺寸。	3

 

3.新的文本屬性

屬性	描述	CSS
hanging-punctuation	規定標點字符是否位於線框之外。	3
punctuation-trim	規定是否對標點字符進行修剪。	3
text-align-last	設置如何對齊最後一行或緊挨着強制換行符之前的行。	3
text-emphasis	向元素的文本應用重點標記以及重點標記的前景色。	3
text-justify	規定當 text-align 設置爲"justify" 時所使用的對齊方法。	3
text-outline	規定文本的輪廓。	3
text-overflow	規定當文本溢出包含元素時發生的事情。	3
text-shadow	向文本添加陰影。	3
text-wrap	規定文本的換行規則。	3
word-break	規定非中日韓文本的換行規則。	3
word-wrap	允許對長的不可分割的單詞進行分割並換行到下一行。	3

 

4.新的轉換屬性

下面的表格列出了所有的轉換屬性：

屬性	描述	CSS
transform	向元素應用 2D 或3D 轉換。	3
transform-origin	允許你改變被轉換元素的位置。	3

2D Transform 方法

函數	描述
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 軸。

 

5.轉換屬性

下面的表格列出了所有的轉換屬性：

屬性	描述	CSS
transform	向元素應用 2D 或3D 轉換。	3
transform-origin	允許你改變被轉換元素的位置。	3
transform-style	規定被嵌套元素如何在 3D 空間中顯示。	3
perspective	規定 3D 元素的透視效果。	3
perspective-origin	規定 3D 元素的底部位置。	3
backface-visibility	定義元素在不面對屏幕時是否可見。	3

3D Transform 方法

函數	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用16 個值的4x4 矩陣。
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 轉換元素的透視視圖。

 

6.過渡屬性

下面的表格列出了所有的轉換屬性：

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

 

7.CSS3 動畫屬性

下面的表格列出了 @keyframes 規則和所有動畫屬性：

屬性	描述	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

 

8.新的多列屬性

下面的表格列出了所有的轉換屬性：

屬性	描述	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

 

9.新的用戶界面屬性

下面的表格列出了所有的轉換屬性：

屬性	描述	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