為了瀏覽器相容問題，所以需要在css3的一些新的style方法中加字首
例如：border-radius
-webkit-border-radius//google
-moz-border-radius//foxs
-ms-border-radius//ie
-o-border-radius//oprea
新增了屬性選擇器
位置選擇器
偽類選擇器
選擇器說明
::before
在元素裡的最前面
::after
在元素裡的最後面
::selection
被選擇的元素
::first-line
第一行文字
::root
元素的根元素
border-radius
圓角邊框
設定四個值順序為左上、右上、右下、左下
box-shadow
陰影六個值 ，水平陰影、豎直陰影、模糊、擴充套件（向四周）、顏色、inset（內部模糊）
border-image
邊框六個值 ，檔案路徑、切分、寬度、擴充套件、是否重複
-webkit-transform//google
-moz-transform//foxs
-ms-transform//ie
-o-transform//oprea
定義屬性說明
transform:rotate(8deg)
旋轉正數為順時針,負數為逆時針，deg表示角度
transform:translate(x,y)
偏移可分為transform:translatex(x)和transform:translatey(y)
transform:scale(x,y)
縮放可分為transform:scalex(x)和transform:scaley(y)，值不需要單位，是比例
transform:skew(8deg)
斜切扭曲
正數為逆時針,負數為順時針，可分為transform:skewx()和transform:skewy()，值為角度
3d轉換
定義屬性說明
transform:rotate3d(x,y,z,角度)
旋轉x,y,z非0表示該軸參與旋轉，否則寫0.正數為順時針,負數為逆時針，deg為角度單位，可分為transform:rotatex(角度)、transform:rotatey(角度)、transform:rotatez(角度)
transform:translate3d(x,y,z)
偏移可分為transform:translatex(x)、transform:translatey(y)和transform:translatez(z)
transform:scale3d(x,y,z)
縮放可分為transform:scalex(x)、transform:scaley(y)和transform:scalez(z)，值不需要單位，是比例擴充套件
方法定義
屬性說明
transform-style:flat/preserve-3d
巢狀元素展現形式
預設為flat不互相干涉，preserve-3d會產生巢狀效果
backface-visibility:visible/hidden
元素背向使用者時是否可見
預設visible可見，hidden不可見
在時間區域內平滑的過渡
方法定義
屬性說明
transition-property:none/all/屬性名
加過渡效果的屬性
預設為all,可以寫color等屬性名
transition-duration:time/0
過渡效果的持續時間
設定的time值，預設是0
transition-timing-function:很多
過渡效果的動畫型別
ease:平滑過渡；linear:線性過渡；ease-in:由慢到快；ease-out由快到慢；ease-in-out由慢到快到慢
transition-delay:time/0
過渡效果的延遲時間
設定的time值，預設是0
簡寫：transition：property duration timing-function delay,其中duration是必需的
手機的瀏覽器在使用css3動畫時，要加上webkit字首
相關方法 方法
定義屬性說明
animation-name:none/選擇器的關鍵幀
檢索或設定物件的動畫名稱
animation-duration:time/0
檢索或設定動畫的持續時間
設定的time值，預設是0
animation-timing-function:很多
檢索或設定動畫的型別
ease:平滑過渡；linear:線性過渡；ease-in:由慢到快；ease-out由快到慢；ease-in-out由慢到快到慢
animation-delay:time/0
檢索或設定動畫的延遲時間
設定的time值，預設是0
animation-iteration-count:次數/infinite（無限次）
檢索或設定動畫的迴圈次數
預設為1
animation-direction:normal/reverse/alternate/alternate-reverse
檢索或設定動畫在迴圈中的方向
必須先有迴圈
animation-fill-mode:none/forwords（動畫結束時的狀態）/backwords（動畫開始時的狀態）
animation-play-state:paused/running
動畫暫定或執行
預設為running
簡寫：animation：**name duration** timing-function delay iteration-count direction fill-modeplay-state
關鍵幀（@keyframes）
規定動畫：逐步改變乙個css樣式到另乙個css樣式，css呼叫@keyframes來產生動畫
@keyframes 幀名
}
動畫優化方法
（1）position-fixed替代background-attachment
（2）帶的內容放在偽元素中
（3）will-change：提前告訴瀏覽器元素將要做什麼動畫，讓瀏覽器準備
製作分列布局至少需要column-count和column-gap
屬性說明
column-count
列數column-gap
列之間的間距
column-rule-style
定義列之間分割線的風格
column-rule-width
分割線寬度
css3 語法要點
語法要點 display webkit box 老版本語法 safari,ios,android browser,older webkit browsers.display moz box 老版本語法 firefox buggy display ms flexbox 混合版本語法 ie 10 dis...
css3 流式布局要點
b size large 讓乙個div水平 垂直居中 size b 一 流式布局兩個要點 1，在link中加入media 2，把精確的畫素改為百分比，並使用box sizing border box。盒模型以border為準。解決流式布局中兩個水平盒子各分50 的寬度 二 在頁面布局中小的點 在上面...
css3學習筆記
1.為什麼分許多模組進行管理？為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一，class屬性本身沒有語義，褚翠是用來為css樣式服務的，屬於多餘屬性。第二，使用屬性的話，並沒有把樣式與元素繫結起來，針對同乙個class屬性文字框，下拉框，按鈕都可使用。這樣很...