css3新增樣式

• 盒子居中
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
• border-radius:圓角
• box-shadow: 5px 5px 20px 0 #000
  inset/可不寫:不寫是外陰影,inset是內(nèi)陰影
  X軸偏移值
  Y軸偏移值
  陰影模糊度
  陰影的擴展半徑
  陰影的顏色
• text-shadow:文字陰影
• -webkit-filter: blur(5px); 設(shè)置模糊度：0~10 10是完全模糊
• -webkit-filter: grayscale(1); 灰度：0~1
• -webkit-filter: invert(1); 反色:0~1
• -webkit-filter: sepia(0.5); 疊加褐色:0~1
• 傳統(tǒng)css背景樣式:
• background-color: pink;
• background-image: url("img/baby.jpg");
• background-repeat: no-repeat;
• background-position: -10px -10px;
• background: url("img/baby.jpg") no-repeat;
• CSS3中的背景樣式:
• background-size: 100% 100%;當(dāng)前盒子有多大，背景圖片就有多大，這樣設(shè)置可能會導(dǎo)致圖片變形
• background-size: 100%;讓背景圖片的寬度和容器的寬度保持一致,高度自適應(yīng)
• background-size: cover;以最適合的比例，讓圖片鋪滿整個屏幕，但是可以保證圖片不變形,一般應(yīng)用于大一點的背景圖
• background-origin: border-box; 設(shè)置背景圖片平鋪的起點：border-box從邊框開始設(shè)置背景圖 padding-box：默認(rèn)值,從padding開始 content-box:從內(nèi)容開始
• background-clip: padding-box; 背景圖片裁切 border-box padding-box content-box

css3選擇器

• .box li:nth-child(3)
• .box li:nth-child(odd)
• .box li:nth-child(even)
• .box li:nth-last-child(3)
• .box li:nth-child(3n+1) n=0、1、2...時3n+1的值
• .box li:nth-child(3n+2)
• .box li:nth-child(3n)
• .box li:active
• .box li:not(:nth-child(10)) 括號中放入的是條件：一個新的選擇器
• .box div:nth-child(2)它的意思不是子元素中DIV中的第二個，它的意思是所有子元素中的第2個，并且第二個還需要是個DIV才可以
• .box div:nth-of-type(2) 它是先按照DIV分組，找到這個分組中的第二個，這樣的話我們查找起來會更方便; nth-last-of-type...
  注意：

以下屬性在應(yīng)用時需要寫5套以適應(yīng)不同的瀏覽器環(huán)境，如：
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);

css3變形：transform

• translate(X|Y|Z):位移， 多個變形效果空格隔開
  -webkit-transform:translate(100px,100px);
  -webkit-transform:translateX(100px)
• scale(X|Y|Z)：縮放
  -webkit-transform:scale(1.2);//放大1.2倍
• skew(X|Y|Z)：傾斜
  -webkit-transform:skew(45deg);//傾斜45度數(shù)
• rotate(X|Y|Z):旋轉(zhuǎn),沿著軸線進行旋轉(zhuǎn)
  -webkit-transform:rotate;
• matrix:矩陣變形，自己設(shè)置矩陣公式，讓其按照制定的軌跡和方式進行變形
• transform-origin:變形基準(zhǔn)點，默認(rèn)是center
  =>transform不是動畫，它是給元素設(shè)置變形的效果，在不考慮兼容的情況下，盡量使用transform實現(xiàn)元素的變形和位移，因為它開啟了設(shè)備的硬件加速，性能和體驗都強于傳統(tǒng)的css樣式改變
  =>transform不兼容ie低版本瀏覽器（ie9及以下以下）

css3過度動畫：transition

我們設(shè)置一個過度的規(guī)則和效果，當(dāng)元素樣式發(fā)生改變時，會按照這個規(guī)則運動
-webkit-transition: [property] [duration] [timing-function] [delay] ;(屬性 時間 時間函數(shù) 延時)

• property：設(shè)置元素的哪些樣式在改變后執(zhí)行這個過度規(guī)則，默認(rèn)是all，即所有樣式改變都會執(zhí)行這個規(guī)則，若寫width，則只有在width發(fā)生改變時才按照這個規(guī)則
• duration：設(shè)置動畫運動的總時間
• timing-function：設(shè)置動畫運動的方式，默認(rèn)值是linear，除此還有ease、ease-in、ease-out、ease-in-out...
• delay：設(shè)置延時事件，默認(rèn)是0s，如果設(shè)置為1s，當(dāng)需要運動時，延時1秒后再執(zhí)行

css3幀動畫：

@-webkit-keyframes [name]{
from{ //0%,開始幀位置
}
25%{}
50%{}
100%{}
}

-webkit-animation:[name] [duration] [timing-function] [delay] [count][fill-mode];
[name]：動畫名稱
[duration]：運動時間
[timing-function]：運動方式
[delay]：延遲時間
[count]：運動次數(shù)，infinite無限次運動
[fill-mode]：
forwards:當(dāng)元素按照軌跡運動完成后，停留在最后一幀的位置，不設(shè)置則動畫完成后元素立馬回到第一幀的位置
backwards:如果本次動畫有延遲，則在延遲時間到時，元素處于第一幀的位置，不設(shè)置則是處于當(dāng)前位置
both:以上兩者兼具

=>真實項目中我們自己一般不寫幀軌跡，而是使用animate.css軌跡庫實現(xiàn)我們的需求:https://daneden.github.io/animate.css/

css3盒子模型

• box-sizing: content-box; width height 指定為內(nèi)容
• box-sizing: border-box; width height 指定為整個盒子，不論padding和border大小，其整體大小不變
• 多列布局
• columns:100px 3;規(guī)定寬度和列數(shù)