css3簡單回顧

邊框屬性：

• border-radius：建立圓角邊框
• box-shadow：添加陰影
• border-image：使用圖檔來繪制邊框

背景屬性：

• background-size：規定背景圖檔的尺寸
• background-origin：規定背景圖檔的定位區域，背景圖檔可以放置于 content-box、padding-box 或 border-box 區域
• background-clip：規定背景的繪制區域

新的文本屬性：

• text-shadow：向文本添加陰影
• word-wrap：允許對長的不可分割的單詞進行分割并換行到下一行，p {word-wrap:break-word;}
• text-outline：規定文本的輪廓
• text-overflow 規定當文本溢出包含元素時發生的事情
• text-wrap 規定文本的換行規則
• text-emphasis 向元素的文本應用重點标記以及重點标記的前景色
• text-justify 規定當 text-align 設定為 “justify” 時所使用的對齊方法
• punctuation-trim 規定是否對标點字元進行修剪

字型：

在@font-face中定義字型，通過font-family屬性來引用字型的名稱

• font-family 必需，規定字型的名稱
• src 必需 ，定義字型檔案的 URL
• font-stretch 可選，定義如何拉伸字型，預設是normal
• font-style 可選，定義字型的樣式，預設是 “normal”
• font-weight 可選 ，定義字型的粗細，預設是 “normal”
• unicode-range 可選，定義字型支援的 UNICODE 字元範圍。預設是 “U+0-10FFFF”。

<style> 
@font-face
{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf'),
     	url('Sansation_Light.eot'); /* IE9+ */
     	font-weight:bold;
}

div
{
	font-family:myFirstFont;
}
</style>
           

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 軸。

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 轉換元素的透視視圖。

過渡屬性

• transition 簡寫屬性，用于在一個屬性中設定四個過渡屬性
• transition-property 規定應用過渡的 CSS 屬性的名稱。
• transition-duration 定義過渡效果花費的時間。預設是 0。
• transition-timing-function 規定過渡效果的時間曲線。預設是 “ease”。
• transition-delay 規定過渡效果何時開始。預設是 0。

簡寫：transition: width 1s linear 2s

CSS3 動畫屬性

• @keyframes 規定動畫。
• animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
• animation-name 規定 @keyframes 動畫的名稱。
• animation-duration 規定動畫完成一個周期所花費的秒或毫秒。預設是 0。
• animation-timing-function 規定動畫的速度曲線。預設是 “ease”。
• animation-delay 規定動畫何時開始。預設是 0。
• animation-iteration-count 規定動畫被播放的次數。預設是 1。
• animation-direction 規定動畫是否在下一周期逆向地播放。預設是 “normal”。
• animation-play-state 規定動畫是否正在運作或暫停。預設是 “running”。
• animation-fill-mode 規定對象動畫時間之外的狀态。

簡寫：animation: myfirst 5s linear 2s infinite alternate;

CSS3多列

• column-count 屬性規定元素應該被分隔的列數
• column-gap 屬性規定列之間的間隔
• column-rule 屬性設定列之間的寬度、樣式和顔色規則
• column-width 規定列的寬度
• columns 規定設定 column-width 和 column-count 的簡寫屬性
• column-fill 規定如何填充列

CSS3 使用者界面

• resize 屬性規定是否可由使用者調整元素尺寸
• box-sizing 屬性允許您以确切的方式定義适應某個區域的具體内容
• outline-offset 屬性對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓

輪廓與邊框有兩點不同：輪廓不占用空間、輪廓可能是非矩形

div{
	border:2px solid black;
	outline:2px solid red;
	outline-offset:15px;
}
           

更多内容檢視CSS3參考手冊：https://www.w3school.com.cn/cssref/index.asp

CSS基礎教程：https://www.w3school.com.cn/css/index.asp