CSS3 新屬性彙總

css動畫

1.1. 過渡動畫 transtion：
CSS3 過渡是元素從一種樣式逐漸改變爲另一種的效果。要實現這一點，必須規定兩項內容：

• 指定要添加效果的CSS屬性
• 指定效果的持續時間。

1.2. transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。分寫屬性：

• transition-property：規定應用過渡的 CSS 屬性的名稱,添加多個屬性，逗號隔開必填

• transition-duration: 定義過渡效果花費的時間。默認是 0s 需要指定

• transition-timing-function：規定過渡效果的時間曲線。默認是 “ease”。取值如下：
  ease ease-in ease-in-out ease-out

• transition-delay：規定過渡效果何時開始。默認是 0s

1.3. 關鍵幀動畫

• 定義動畫如：

@keyframes name{
	0%{
		background: red;
	}
	50%{
		background: pink;
	}
	100%{
		background: orange;
	}
}

調用動畫：
animation: name duration timing-function delay iteration-count direction fill-mode
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

分寫屬性：

• animation-name 規定 @keyframes 動畫的名稱。

• animation-duration 規定動畫完成一個週期所花費的秒或毫秒。默認是 0。

• animation-timing-function 規定動畫的速度曲線。默認是 “ease”。

• animation-fill-mode 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣
  式。

• animation-delay 規定動畫何時開始。默認是 0。

• animation-iteration-count 規定動畫被播放的次數。默認是 1。

• infinite 無限循環

• animation-direction 規定動畫是否在下一週期逆向地播放。默認是 “normal”。 reverse 反向

• animation-play-state 規定動畫是否正在運行或暫停。默認是 “running”。

背景background

合寫屬性：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit
分寫屬性：

• background-color 指定要使用的背景顏色
• background-position 指定背景圖像的位置
• background-size 指定背景圖片的大小
• background-image 指定要使用的一個或多個背景圖像
• background-repeat 指定如何重複背景圖像
• background-origin 指定背景圖像的定位區域
• background-clip 指定背景圖像的繪畫區域
• background-attachment 設置背景圖像是否固定或者隨着頁面的其餘部分滾動。
• scroll 背景圖片隨頁面的其餘部分滾動。這是默認fixed 背景圖像是固定的

box-sizing 盒模型

• box-sizing : border-box (IE盒模型)
• box-sizing: content-box (標準盒模型)

計算元素在頁面中佔的空間：

• w3c標準盒模型： content + padding + border+ margin = 實際佔的空間
  默認情況下; content = css中定義的 width
• IE盒模型： [content + padding + border] + margin = 實際佔的空間
  content + padding + border = css中定義的width

應用：

• IE盒模型，指定元素的寬，頁面空間的寬需準確計算

CSS3 漸變（gradients）

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡；

• linear-gradient 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向

語法：

• background: linear-gradient(direction, color-stop1, color-stop2, …);
• radial-gradient 徑向漸變（Radial Gradients）- 由它們的中心定義
• background: radial-gradient([center, shape size,] start-color, …, last-color);
• shape值可以是 circle 或 ellipse

注意：
1、會使用線性漸變，徑向漸變（有兼容問題）
2、會取消過渡
3、會配合background-size ,background-repeat 使用

文本效果相關的css屬性

• text-overflow 規定當文本溢出包含元素時發生的事情。
• text-shadow 向文本添加陰影。
• white-space 指定元素內的空白怎樣處理。 nowrap/normal
• word-break 規定非中日韓文本的換行規則。 normal 瀏覽器默認的換行規則。 break-all 允許在單詞內換行。keep-all 只能
  在半角空格或連字符處換行。
• word-wrap : 允許對長的不可分割的單詞進行分割並換行到下一行。; break-word / normal

2d 轉換

transform 屬性的取值：

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

媒體類型

@media 媒體類型允許你指定文件將如何在不同媒體呈現。

語法:
多媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據條件是否成立返回 true 或 false。

@media [not|only] mediatype [ and (expressions)] {
CSS 代碼...;
}

你也可以在不同的媒體上使用不同的樣式文件：注意： 空格；

3d轉換：

• transform: translate([,]?) rotate() - scale([,]?) skew
• 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 旋轉。 [x,y,z] 類型，可以是0到1之間的數值
• rotateX(angle) 定義沿 X 軸的 3D 旋轉。
• rotateY(angle) 定義沿 Y 軸的 3D 旋轉。
• rotateZ(angle) 定義沿 Z 軸的 3D 旋轉。
• transform-origin 允許你改變被轉換元素的位置。
• transform-style 規定被嵌套元素如何在 3D 空間中顯示。
• perspective 規定 3D 元素的透視效果。