CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（radial-gradient）- 它們中心定義
設置形狀-shape -----circle 表示圓形，ellipse 表示橢圓形 默認值是 ellipse
添加效果CSS屬性
效果持續時間
transition默認值是0。
過渡屬性
transition
簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property
規定應用過渡的 CSS 屬性的名稱。
transition-duration
定義過渡效果花費的時間。默認是 0。
transition-timing-function
規定過渡效果的時間曲線。默認是 "ease"。勻速linear
transition-delay
規定過渡效果何時開始。默認是 0。
transform-origin: right top 設置旋轉軸心
2d轉化：
translate() 平移
rotate() 旋轉
scale() ：scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數：
skew()：包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜。
matrix()方法和2D變換方法合並成一個。
matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能
3d轉化
函數 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)16 個值的 4x4 矩陣。
translate3d(x,y,z) 3D 轉化。
translateX(x) X 軸的值。
translateY(y) Y 軸的值。
translateZ(z) Z 軸的值。
scale3d(x,y,z) 縮放轉換。
scaleX(x) X 軸的值。
scaleY(y) Y 軸的值。
scaleZ(z) Z 軸的值。
rotate3d 旋轉
rotateX-- X 軸旋轉
rotateY-- Y軸旋轉
rotateZ- Z軸旋轉
perspective(n)-定義 3D 轉換元素的透視視圖
@keyframes -規定動畫
animation- 所有動畫屬性的簡寫屬性
animation-name- @keyframes 動畫的名稱
animation-duration -動畫完成一個周期花費的秒或毫秒
animation-timing-function -動畫的速度曲線
animation-fill-mode- 當動畫不播放時
animation-delay- 動畫何時開始
animation-iteration-count- 動畫被播放的次數
animation-direction -動畫是否在下一周期逆向地播放
animation-play-state -動畫是否正在運行或暫停
動畫設置所有的屬性：
6.CSS3多列布局
CSS3 可以將文本內容設計成像報紙一樣的多列布局
CSS3 多列屬性
column-count-元素應該被分割的列數。
column-fill-如何填充列
column-gap-列與列之間的間隙
column-rule-* 屬性的簡寫
column-rule-color-兩列間邊框的顏色
column-rule-style-兩列間邊框的樣式
column-rule-width-兩列間邊框的厚度
column-span-元素要跨越多少列
column-width-列的寬度，不要與column-count同時使用