1.響應式佈局；
響應式佈局有兩種方法：1. 流式佈局：百分比佈局（寬，高，定位置） 所謂百分比，尺寸的百分比：基於父級的百分比。
流式佈局需要在head裡面寫上這句話：<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
使用流式佈局是需要注意幾點：margin，padding 設定這兩個數值時，需要根據螢幕寬度變化而改變數值（並不是高度）即：margin數值/螢幕寬度（父級寬度）= 百分比，left,top,right,bottom 需要根據各自的方向而計算百分比。top/父級的高度 = 百分比 left/父級的寬度 = 百分比
2. 媒體查詢： @media only screen and (max-width: 00px) and (min-width: 00px){ ... }
外部引用樣式時的媒體查詢新增方法是：<link rel=stylesheet href=c.css media=screen and (max-width: 00px) and (min-width: 00px)>
這個，適用於，整個頁面變化較大的情況
3. H5的新標籤 語義標籤：<article>定義文章 ，<aside>定義文章側邊欄，<figure>定義一組媒體物件及文字 / <figcaption> 標題，<nav>導航條，<header>頭部，<section>分割槽，<footer>尾部。表單input的新屬性值：
<form action=>
<!-- 郵件 -->
email: <input type=email name=em>
<!-- 網址，一定要加協議 -->
url: <input type=url name=url>
<!-- 數字，還有e 自然常數e（約為2.71828 -->
<!-- required 必須填寫的專案 -->
number: <input type=number name=number required>
<!-- 範圍 range 預設範圍大小是0-100之間變換 -->
range: <input type=range name=rg min=0 max=5>
</form>
視訊標籤：<video src=></video>,(格式：H.264 MP4/autoplay 自動播放/controls 是否允許控制/preload 提前載入，如果遇到autoplay就忽略該屬性/loop 自動迴圈播放) 音訊標籤：<audio src=></audio>, iframe框架: <iframe src= frameborder= style=></iframe>,標註，標記<mark>，畫布<canvas>
4.css3選擇器，兄弟選擇器：“+” 同級兄弟選擇器 + 相鄰元素，而且必須要在下面 / “~” 兄弟選擇器，下面所有的標籤 都能選中。
子選擇器：“>” 只選擇子輩，不去選再下一輩 /  ~ 平級。
子元素選擇器：nth-child(n) ，nth-last-child(n)，first-child，last-child（括號中，可以填表達式，數字，n / n是從0開始取）
first-of-type , last-of-type , nth-of-type , nth-last-of-type
5. 動畫效果：transform2d / transform3d 以及 transition
transtion: 過渡屬性，讓一個元素從一個效果過度到一個效果。
延遲 幾秒出現效果： -webkit-transition-delay: 0s;
過度某個元素的某個屬性 property： -webkit-transition-property:  ;
定義過渡效果花費的時間： -webkit-transition-duration: 0s;
規定過渡效果的時間曲線： -webkit-transition-timing-function:  ease; 也可以使用貝塞爾曲線
/ ease 慢 快 慢;  ease-in 先慢後快;  ease-out 先快再慢； linear 勻速 /
transform2d：
1. 父級裡設定 -webkit-transition: all 1s;
2. 在父級裡 設定/* 原點，基準點  */
/* 數值，left center right bottom top */
/* 可以影響 傾斜 旋轉 縮放 */
-webkit-transform-origin: right top;
2D 轉換方法：
3./* transform 運動，做何種運動，需要後面規定 */
/*-webkit-transform: translate(50px, 50px);
/*-webkit-transform: translateX(300px);
/*-webkit-transform: translateY(300px);
/* scale(x,y) 縮放 */
/*-webkit-transform: scale(2, 2);
/* scaleX 沿著X軸變換比例 */
-webkit-transform: scaleX(3);
/* scaleY 沿著Y軸變換比例 */
-webkit-transform: scaleY(3);
/* rotate 旋轉 也可以單獨設定 X Y軸*/
/*-webkit-transform: rotate(180deg);
* skew 傾斜(x, y) 也可以單獨設定 X Y軸*/
/*-webkit-transform: skew(30deg, 30deg);
transform3d：
/* 透視點 */
/* 設定一個位置觀察運動 */
/* 放在父級 最好放在body裡 */
perspective: 1000px;
/* 開啟3D模式 給父級加開啟 */
-webkit-transform-style: preserve-3d;
/* 透視原點 */
-webkit-perspective-origin: center center;
/* 背面是否可見 */
-webkit-backface-visibility: visible;
3D 轉換方法：
translate3d(x,y,z) 定義 3D 轉化。
/* 沿Z軸平移 */
/*-webkit-transform: translateZ(999px);
rotate3d(x,y,z,angle) 定義 3D 旋轉。
/* 沿Z軸旋轉 */
-webkit-transform: rotateZ(360deg);
/* 兩個運動共同執行，中間用空格隔開 */
/* 運動是有先後順序的 */
scale3d(x,y,z) 定義 3D 縮放轉換。
/* scaleZ 沿著Z軸變換比例 */
-webkit-transform: scaleZ(3);
徑向漸變：/* css3 中的漸變就是生成了一張圖片 */
/*  可以在顏色前面 設定 數值 百分比 英文 */
background-image: -webkit-radial-gradient(50% 50%, yellow, red, green, blue);
線性漸變：/* linear-gradient 線性漸變 顏色前面可以加位置 top left right bottom */
background-image: -webkit-linear-gradient(top, red 10%, yellow 50%, green 90%);
1234/5678
border-radius: 10px 20px 30px 70px / 20px 20px 30px 40px;
<style>
body{
perspective: 1000px;


-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* 動畫宣告和定義 */
/* move 動畫的名稱 */
/* from 0% to 100% */
@-webkit-keyframes move {
from {
-webkit-transform: translateX(0px);
}


50%{
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
}


to {
-webkit-transform: translateX(200px);
-ms-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}


div{
/* animation 動畫*/
/* animn */
-webkit-animation-name: "move";

/* andur 設定動畫的運動時間 */
-webkit-animation-duration: 1s;


/* 設定動畫的運動次數 */
/* aici */
/* infinite 無線次數 */
-webkit-animation-iteration-count: 2;


/* 運動效果 */
/* anit */
/* linear勻速 */
/* ease liner*/
-webkit-animation-timing-function: liner;


/* 運動方向和軌跡 */
/* andi */
/* normal 正常方向*/
/* alternate 往返運動 當設定往返運動時 返回時的運動佔用運動次數 */
/* reverse 相反方向 */
-webkit-animation-direction: normal；


/* 動畫運動狀態 */
/* running 運動 */
/* paused 暫停 */
-webkit-animation-play-state: running;


/* 運動停留狀態 */
/* both */
/* forwards 動畫最後停留在結束的位置 */
/* backwards 返回到初始位置 */
-webkit-animation-fill-mode: forwards;


/* 延遲 */
/* delay */
/* and */
/*-webkit-animation-delay: 1s;


/* 複合寫法 */
/* 名稱 運動時間 運動方式 運動次數 延遲 */
/* -webkit-animation: name duration timing-function delay iteration-count direction fill-mode; */
/*-webkit-animation: move 1s ease 1s;
-o-animation: move 1s ease 1s;
animation: move 1s ease 1s;*/


}
css倒影：
/* 上 above */
/* 下 below */
/* 左 右 left right*/
/* 第一個值 倒影的方向 第二個值 倒影與內容的距離 第三個值 漸變 */
-webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(255, 233, 123, 0) 10%, rgba(0, 0, 0, 0.6));
/* box-shadow: x y size blur inset; */
/* 可以設定多個值用逗號間隔 */
CSS3 文字陰影
text-shadow: 0px 0px 5px pink, 0px 0px 10px pink, 0px 0px 15px purple, 0px 0px 20px pink, 0px 0px 25px pink,2px 2px 30px purple;