---恢復內容開始---
一、CSS3新增選擇器
1、nth-chlid(n)用法
selector:nth-chlid(n)指找到第n個子元素並且該元素為selector標簽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 .box p,.main p{ 12 background:red; 13 color:#fff; 14 margin-top:10px; 15 } 16 /*找到類為box下的第三個子元素並該元素為p標簽的*/ 17 .box p:nth-child(3){ 18 background:gold; 19 } 20 .box p:nth-of-type(3){ 21 background:gold; 22 } 23 /*找到類為main下的第三個子元素並該元素為div標簽的*/ 24 .main div:nth-child(3){ 25 background: pink; 26 } 27 /*找到類為main下的第三個p標簽*/ 28 .main p:nth-of-type(3){ 29 background:green; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="box"> 35 <p>段落1</p> 36 <p>段落2</p> 37 <p>段落3</p> 38 <p>段落4</p> 39 <p>段落5</p> 40 <p>段落6</p> 41 </div> 42 <div class="main"> 43 <p>段落1</p> 44 <p>段落2</p> 45 <div>這是一個div</div> 46 <p>段落3</p> 47 <p>段落4</p> 48 <p>段落5</p> 49 <p>段落6</p> 50 </div> 51 </body> 52 </html>
2、nth-last-chlid(n)用法
selector:nth-last-chlid(n)指找到倒數第n個子元素並且該元素為selector標簽
3、selector：enabled可用的表單控件
4、selector:disabled不可用的表單控件
1 <style> 2 input:disabled{ 3 background:red; 4 } 5 input:enabled{ 6 background:gold; 7 } 8 /*選擇復選框，緊鄰文字變為空色*/ 9 input:checked + label{ 10 color:red; 11 } 12 </style> 13 <body> 14 <form> 15 <input type="text" placeholder="請輸入用戶名" disabled> 16 <input type="password" placeholder="請輸入密碼"> 17 <input type="checkbox"><label>記住用戶名</label> 18 </form> 19 </body>
5、E>F E元素下的第一層子集
6、E~F E元素后面的兄弟元素
7、E+F 緊挨着的兄弟元素
8、屬性選擇器 E[data-attr]含有data-attr屬性的元素
a、E[data-attr='ok'] 含有data-attr屬性的元素且它的值為"ok";
b、E[data-attr^='ok']含有data-attr屬性的元素且它的值開頭含有"ok";
c、E[data-attr$='ok']含有data-attr屬性的元素且它的值結尾含有"ok";
d、E[data-attr*='ok']含有data-attr屬性的元素且它的值中含有"ok";
eg div[data-attr = "ok"]{
color:red;
}
二、CSS3圓角
1、設置某一個角的圓角：border-radius:左上角 右上角 右下角 左下角;
比如設置左上角的圓角：border-top-left-radius:30px 60px;
2、同時設置四個角：border-radius:30px 20px 10px 50px;
3、設置四個角相同（常用）：border-radius:20%;border-radius:50%;(是正圓)
三、CSS3陰影
1、box-shadow:水平偏移 垂直偏移 羽化大小 擴展大小 顏色 是否內陰影
注：正值向右偏移，向下偏移，默認為外陰影
box-shadow:10px 5px 20px 2px pink;
如果做內陰影的話，可以把偏移量設為0
box-shadow:0 0 20px 2px red inset;
四、CSS3 透明度rgba（新的顏色值表示法）
1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）
2、rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度
五、transition過渡動畫 （需要觸發）
transition:過渡屬性 時間 運動方式 動畫延遲
1、transition-property 設置過渡的屬性，比如：width height background-color（是在寬度上做動畫還是在高度上亦或是背景上）
2、transition-duration 設置過渡的時間，比如：1s 500ms
3、transition-time-function 設置過渡的運動方式
a、linear 勻速
b、ease 開始和結束慢速
c、ease-in 開始時慢速
d、ease-out 結束時慢速
e、ease-in-out 開始和結束時慢速
4、transition-delay 設置動畫的延遲
制作圖片文字遮罩
六、transform變換（一般配合transition使用，有個過渡效果不至於太突兀）
1、translate(x,y) 設置盒子位移 如:transform:translate(200px,300px);
2、scale(x,y) 設置盒子縮放 如：transform:scale(1.2,1);
3、rotate(deg) 設置盒子旋轉 如：transform:rotate(360deg);
4、skew(x-angle,y-angle) 設置盒子傾斜 如:transform:skew(20deg,30deg);
5、perspective 設置透視距離（近大遠小） 如:transform:perspective(800px) rotateX(30deg);
6、transform-style flat| preserve-3d 設置盒子是否按3d空間顯示 如：transform-style:preserve-3d;
7、translateX、translateY、rotateZ 設置三維移動
8、rotateX、rotateY、rotateZ 設置三維旋轉
9、scaleX、scaleY、scaleZ 設置三維縮放
10、transform-origin 設置變形的中心點 如：transform-origin:left top;transform-origin:20px 50px;
11、backface-visibility 設置盒子背面是否可見 如：backface-visibility:hidden;
例：翻面效果（正面是圖片，鼠標點擊圖片之后，會翻轉180度背面出現文字說明）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>翻面效果</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 .con{ 12 width:200px; 13 height:144px; 14 border:1px solid #ccc; 15 margin:100px auto; 16 position: relative; 17 transform-style: preserve-3d; 18 transform:perspective(800px) rotateY(0deg); 19 } 20 .pic,.info{ 21 width:200px; 22 height:144px; 23 position:absolute; 24 left:0; 25 top:0; 26 transform:perspective(800px) rotateY(0deg); 27 backface-visibility: hidden; 28 transition:all 500ms ease; 29 } 30 .info{ 31 background:gold; 32 text-align: center; 33 line-height: 144px; 34 backface-visibility: hidden; 35 transform:translateZ(2px) rotateY(180deg); 36 } 37 .con:hover .pic{ 38 transform:perspective(800px) rotateY(180deg); 39 } 40 .con:hover .info{ 41 transform:perspective(800px) rotateY(0deg); 42 } 43 </style> 44 </head> 45 <body> 46 <div class="con"> 47 <div class="pic"> 48 <img src="../images/furit_01.jpg" alt=""> 49 </div> 50 <p class="info">圖片文字說明</p> 51 </div> 52 </body> 53 </html>
七、CSS3 animation動畫（直接進行動畫，不需要觸發）
animation:動畫名稱 動畫持續時間 動畫運動方式 動畫開始延遲時間 動畫應用次數 動畫結束后是否按原路返回 動畫前后的狀態;同時設置多個屬性
如：animation:moving 1s ease 1s 6 alternate forwards;
1、@keyframes 定義關鍵幀動畫
如：@keyframes 動畫名{
from{屬性：屬性值}
to{屬性：屬性值}
}
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線
a、linear 勻速
b、ease 開始和結束慢速
c、ease-in 開始時慢速
d、ease-out 結束時慢速
e、ease-in-out 開始和結束時慢速
f、steps 動畫步數
5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction:normal 默認動畫結束不返回/alternate 動畫結束后返回
8、animation-play-state 動畫狀態
a、paused 停止
b、running 運動
9、animation-fill-mode 動畫前后的狀態
a、none 不改變默認行為
b、forwards 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）
c、 backwards 在animation-delay所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）
例：loding動畫，代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Loading動畫</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 .con{ 12 width:300px; 13 height:100px; 14 margin:50px auto; 15 border:1px solid #ccc; 16 position: relative; 17 } 18 .con div{ 19 width:30px; 20 height:50px; 21 background:gold; 22 margin:15px; 23 float:left; 24 border-radius: 10px;; 25 } 26 .con p{ 27 position: absolute; 28 left:0; 29 bottom:0; 30 width:100%; 31 text-align: center; 32 } 33 .con div:nth-child(1){ 34 background:red; 35 animation:loading 500ms ease 0s infinite alternate; 36 } 37 .con div:nth-child(2){ 38 background:orangered; 39 animation:loading 500ms ease 100ms infinite alternate; 40 41 } 42 .con div:nth-child(3){ 43 background: blue; 44 animation:loading 500ms ease 200ms infinite alternate; 45 46 } 47 .con div:nth-child(4){ 48 background: green; 49 animation:loading 500ms ease 300ms infinite alternate; 50 51 } 52 .con div:nth-child(5){ 53 background: cyan; 54 animation:loading 500ms ease 400ms infinite alternate; 55 56 } 57 @keyframes loading { 58 from{ 59 transform:scale(1); 60 } 61 to{ 62 transform: scale(0.5); 63 } 64 } 65 </style> 66 </head> 67 <body> 68 <div class="con"> 69 <div></div> 70 <div></div> 71 <div></div> 72 <div></div> 73 <div></div> 74 <p>Loading...</p> 75 </div> 76 </body> 77 </html>
八、CSS3瀏覽器樣式前綴
1、為了讓CSS3樣式兼容，需要將某些樣式加上瀏覽器前綴
a、-ms- 兼容IE瀏覽器
b、-moz- 兼容firefox
c、-o- 兼容opera
d、-webkit- 兼容chrome和safari
2、Sublime text編輯器自動添加瀏覽器前綴
目前，有些CSS3屬性需要加前綴，有些不需要加，有些只需要加一部分，這些加前綴的工作可以交給插件來完成，比如安裝autoprefixer
Sublime text中安裝autoprefixer
a、在preferences/key Bindings-Users
設置快捷鍵{"key":["ctrl+alt+x"],"command":"autoprefixed"}通過此工具可以按照最新的前綴使用情況給樣式自動加前綴
說明：last 7 versions：最新的瀏覽器的7個版本
cascade：縮進美化屬性值
b、在preferences/package setting>autoprefixer>setting-user{
"browsers":["last 7 versions"],
"cascade":true,
"remove":true
}