(相對於css增加的內容)
1.動畫（animation）
1 @keyframes 規定動畫，後邊跟動畫名稱，再接大括號內的各種屬性； 2 animation 所有動畫屬性合集； 3 animation-name 名稱；呼叫一個動畫時指定的動畫格式來源名稱； 4 animation-duration 動畫時間； 5 animation-timing-function 動畫速度曲線；值：linear(速度一直相同),ease(首尾慢，中間快）,ease-in(開始慢),ease-out(結尾慢),ease-in-out,cubic-bezier(n,n,n,n)函式定義； 6 animation-delay 動畫延期開始時間； 7 animation-iteration-count 播放次數，預設為1； 8 animation-direction 動畫是否在下一週期逆向播放；值：normal,reverse(反向播放),alternate(奇正偶反),alternate-reverse(奇反偶正),initial,inherit; 9 animation-play-state 動畫狀態，值:running(預設),paused（暫停）；
2.漸變(gradients)
讓使用顏色的地方在兩個或多個指定顏色之間平穩過渡，css3有線性和徑向漸變兩種；
1 (color1,color2) 預設從上到下的漸變，例：background:(red,yellow); 2 (to right,color1,color2) 從左到右，火狐和opera瀏覽器的可以省略to,webkit瀏覽器的使用left,下同； 3 (to left,color1,color2) 從右到左； 4 (to bottom,color1,color2) 從上到下； 5 (to top,color1,color2) 從下到上； 6 (to bottom right,color1,color2) 從左上角到右下角； 7 linear-gradient(90deg,color1,color2) 按角度漸變，新標準是我們數學的角度標準，老的則是按相反方向走角度的，如90新標準表示從下到上，舊標準為從上到下； 8 (color1,color2,color3) 依次多個顏色的漸變，方向角度等的用法同上； 9 repeating-linear-gradient(color1,color2 10%) 重複線性漸變； 10 radial-gradient(color1,color2) 從內到外均勻徑向漸變；當顏色後加上百分比時，則是按比例漸變，所有顏色比例和不一定要等於100%； 11 radial-gradient(circle,color1,color2) 設定形狀漸變，預設是ellipse（橢圓） 12 repeating-radial-gradient(color1,color2 20%) 重複徑向漸變；
3.2D轉換屬性transform的值
1 translate(x,y) 平移給定距離的位置；例：transform: translate(50px,100px); 2 rotate(angle) 旋轉一個角度，值為deg單位數值，可以為負數，即逆時針旋轉； 3 scale(x,y) 縮放，值為原來的倍數； 4 skew(angle,angle2) x,y方向上傾斜（不是旋轉）,第二個值可以省略，預設為0； 5 matrix() 以上屬性合集，包含六個值，依次為：旋轉，綻放，平移，傾斜；
4.3D轉換
1 transform 2D轉換的值都可使用，還增加了rotateX()繞X軸旋轉，和rotateY()繞Y軸旋轉，rotateZ()，perspective()透視， 2 transform-origin 更改轉換元素位置； 3 transform-style 值：flat(2D平面呈現),preserve-3d(3D空間呈現) 4 perspective 透視，值為px距離，或none; 5 perspective-origin 定義子元素的透視； 6 backface-visibility 定義當前元素不面向螢幕時是否可見，值：visible,hidden;
5.過渡
1 transition-property 顯示過度的屬性，值：none,all,指定css屬性名以逗號分隔； 2 transition-duration 過渡時間，值為時間，一般為秒(s); 3 transition-timing-function 速度曲線，值：linear(速度一直相同),ease(首尾慢，中間快）,ease-in(開始慢),ease-out(結尾慢),ease-in-out,cubic-bezier(n,n,n,n)函式定義； 4 transition-dilay 延遲時間； 5 transition 過渡屬性合集；
6.多列(column)
1 column-count 元素被分割的列數； 2 column-fill 列填充方式；值：balance短平衡，auto 3 column-gap 列間距； 4 column-ruls 兩列間邊框樣式合集； 5 column-rule-color 顏色；值為css顏色； 6 column-rule-style 樣式；值：none,hidden,dotted(點狀),dashed(虛線),solid(實線),double(雙線),groove(定義雙線，寬度為border-width),ridge(三維菱形),inset(三維凹邊框),outset(三維凸邊框)； 7 column-rule-width 寬度；值：thin,medium,thick,長度單位值； 8 column-span 元素要跨越的列數； 9 column-width 列寬； 10 columns column-width和column-count的合集；
7.彈性盒子
1 display none(不顯示),block,inline(預設),inline-block,list-item,run-in,inline-table,table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-colummn,table-cell,table-caption,inherit; 2 flex-direction 彈性容器在子元素排列方式，值：row(預設),row-reverse,column,column-reverse;initial,inherit; 3 justify-content 彈性盒子元素在主橫軸方向對齊方式；值：flex-start(預設位於開頭),flex-end,center,space-between(專案位於各行間留有空白的容器內),space-around,initial,inherit 4 align-items 彈性盒子內子元素在縱軸方向對齊方式：值:stretch(預設),center,flex-start,flex-end,baseline(位於容器基線),initial,inherit; 5 flex-wrap 設定彈性盒子的子元素超出父容器時是否換行。值：nowrap(預設),wrap(換),wrap-reverse,initial,inherit; 6 align-content 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，而是設定行對齊;值：stretch,center,flex-start,flex-end,space-between,space-around,initial,inherit; 7 flex-flow flex-direction和flex-wrap合集； 8 order 彈性盒子子元素排列順序，值為數字，預設0； 9 align-self 在彈性子元素上使用，覆蓋容器的align-item屬性，值：stretch(預設),center,flex-start,flex-end,baseline(位於容器基線),initial,inherit; 10 flex 設定彈性盒子子元素空間分配方式，值：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
8.其他新特性
1 appearance 定義一個元素的外觀為指定樣式，值：normal,icon(小圖片樣式),window(視窗),button,menu,field(輸入欄位樣式); 2 box-sizing 允許你以某種方式定義某些元素，以適應指定區域。值：content-box(預設),border-box,inherit; 3 icon 將元素設定為圖示等價物,值為auto,URL(如有多個圖示，對逗號分隔); 4 outline-offset 外輪廓修飾並繪製超出邊框的邊緣; 5 resize 元素可由使用者調整大小的部分；值:none,both,horizontal(寬度),vertical(高度);
**使用css製作按鈕
1 .button { 2 background-color: #4CAF50; /* Green */ 3 border: none; 4 color: white; 5 padding: 15px 32px; 6 text-align: center; 7 text-decoration: none; 8 display: inline-block; 9 font-size: 16px; 10 }