css3前綴（瀏覽器兼容）
根據瞭解，css3屬性大部分支持ie10，部分支持ie9，少部分支持ie8
// 前綴
// -webkit- Safari and Chrome（蘋果、谷歌）
// -moz- Firefox（火狐）
// -ms- IE9（IE瀏覽器）
// -o- Opera（世界之窗）
// 例如ie兼容：
// -ms-transform（轉換）
// -ms-transition（過渡）
// @-ms-keyframes（關鍵幀）
// -ms-animation（動畫 ）
transform（轉換）（ie9及以上支持，ie9需添加前綴-ms-）
// transfrom屬性的方法使用
transform: scale(30, 60); // 縮放： X軸縮放 30 倍，Y軸縮放 60 倍，只有一個值時爲 XY 縮放倍數
transform: skew(30deg, 60deg); // 傾斜： X軸傾斜 30 度，Y軸傾斜 60 度，只有一個值時爲 X軸 傾斜度數
transform: translate(30px, 60px); // 移動： X軸平移 30 px，Y軸平移 60 px，只有一個值時爲 X軸 平移距離
transform: rotate(30deg); // 旋轉： 順時針旋轉 30 度
transform: rotateX(30deg); // 3D水平旋轉： 3D X軸順時針翻轉 30 度
transform: rotateY(60deg); // 3D垂直旋轉： 3D Y軸順時針翻轉 60 度
transform: matrix(1, 0, 0, 1, 0, 0); // 整體轉換： (縮放X, 傾斜X, 傾斜Y, 縮放Y, 移動X, 移動Y)
// 注意：6個參數 全部爲數值，不帶單位
// 1、縮放X X軸縮放倍數
// 2、傾斜X X軸傾斜百分比（相對寬度）
// 3、傾斜Y Y軸傾斜百分比（相對高度）
// 4、縮放Y Y軸縮放倍數
// 5、移動X X軸平移像素
// 6、移動Y Y軸平移像素
transition（過渡）（ie10及以上支持）
transition-property: transform; // 屬性名稱
transition-duration: 2s; // 用時長度（默認爲0s）
transition-timing-function: linear; // 過渡效果（曲線ease（默認）/勻速linear）
transition-delay: 1s; // 何時開始（默認爲0s）
transition: transform 2s linear 1s; // transform，用時2s，勻速，1s後開始
@keyframes（關鍵幀）（ie10及以上支持）
// -webkit-等前綴在keyframes前面添加
// from ~ to
@keyframes cssName1 {
from {
background: red;
}
to {
background: green;
}
}
// 0% ~ 100%
@keyframes cssName2 {
0% {
transform: translate(0);
}
25% {
transform: translate(-200px);
}
50% {
transform: translate(0);
}
75% {
transform: translate(200px);
}
100% {
transform: translate(0);
}
}
animation（動畫）（ie10及以上支持）
animation-name: name; // 動畫名稱
animation-duration: 2s; // 用時長度（默認爲0s）
animation-timing-function: linear; // 過渡效果（曲線ease（默認）/勻速linear）
animation-delay: 1s; // 何時開始（默認爲0s）
animation-iteration-count: infinite; // 播放次數（1（默認）/infinite永遠）
animation-direction: alternate; // 順逆播放（normal正向（默認）/alternate反向）
animation-play-state: paused; // 動畫狀態（running運動（默認）/paused暫停）
animation: name 2s linear 1s infinite alternate paused; // name，用時2s，勻速，1s後開始，無限循環，反向，暫停
css3其他屬性
css3邊框（ie9及以上支持）
border-radius: 25px; // 邊框圓角
box-shadow: 10px 10px 5px #888888; // 邊框陰影（X軸偏移像素、Y軸偏移像素、模糊像素大小、顏色）
border-image: url(bg.jpg) 30 30 round; // 邊框背景（背景、X軸、Y軸、重複性 ）（ie不支持）
css3背景（ie9及以上支持）
background-size: 40% 100%; // 背景圖大小（像素或百分比縮放）
background-origin: content-box; // 背景圖定位區域（content-box、padding-box（默認）、border-box）
background-clip: content-box; // 背景繪製區域（content-box、padding-box（默認）、border-box）
css3文本
// ie10及以上支持
text-shadow: 3px 2px 1px #f00; // X軸、Y軸、模糊距離、顏色（文字陰影）
// ie8及以上支持
word-wrap: break-word; // 對長單詞進行拆分，並換行到下一行（英文換行）
CSS3字體（ie9及以上支持）
@font-face{
font-family: myFirstFont;
font-weight: bold;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); // IE9+
}
body{
font-family: myFirstFont; // 定義字體的名稱
}
css3多列（ie9及以上支持）
column-count: 3; // 元素中的文本 分隔的列數
column-gap: 40px; // 元素中的文本 列之間的間隔
column-rule: 3px outset #f00; // 元素中的文本 列之間的寬度、樣式和顏色
css3用戶界面
// ie8及以上支持
box-sizing: border-box; // 元素寬高是否包含padding和border
// content-box 不包含（默認）
// border-box 包含
// ie不支持
resize: both; // 調整元素尺寸，需添加 overflow: auto 一起使用
// horizontal 可調寬
// vertical 可調高
// both 可調寬高
// none 不可調
// ie不支持
outline-offset: 100px; // 在元素外100px處10px的輪廓
// 可配合outline: 10px solid green 一起使用