(整理中······)
一、選擇器
新增的偽類
1、p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
2、p:last-of-type 選擇屬於其父元素的最后 <p> 元素的每個 <p> 元素。
3、p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
4、p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。
5、p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
二、盒子模型
新增了邊框屬性:
1、border-radius
支持瀏覽器:IE9+、Firefox、Chrome、Safari 、Opera
2、box-shadow 向方框添加一個或多個陰影
支持瀏覽器:IE9+、Firefox、Chrome、Safari 、Opera
3、border-image
支持瀏覽器:Firefox(舊版本需要前綴-moz-)、Chrome(舊版本需要前綴-webkit-)、Safari(Safari 5 以及更老的版本需要前綴 -webkit-) 、Opera( 需要前綴 -o-)
三、背景
1、background-size 規定背景圖片的尺寸
支持瀏覽器:IE9+、Firefox(舊版本需要前綴-moz-)、Chrome、Safari、Opera
2、background-origin 規定背景圖片的定位區域,背景圖片可以放置於 content-box、padding-box 或 border-box 區域。
支持瀏覽器:IE9+、Firefox、Chrome、Safari、Opera
3、background-clip 規定背景的繪制區域
支持瀏覽器:IE9+、Firefox、Chrome、Safari、Opera
四、文本效果
1、text-shadow 可向文本應用陰影
支持瀏覽器:IE10、Firefox、Chrome、Safari、Opera
2、word-wrap 允許文本強制文本進行換行 - 即使這意味着會對單詞進行拆分
支持瀏覽器:所有主流瀏覽器
五、字體
@font-face
六、2D/3D轉換
1、transform 向元素應用 2D 或 3D 轉換
支持瀏覽器:
IE10:2D、3D都支持(2D IE9 需要前綴 -ms-);
Firefox:2D、3D都支持;
Chrome:2D、3D都支持(2D、3D需要前綴 -webkit-);
Safari:2D、3D都支持(2D、3D需要前綴 -webkit-);
Opera:只支持2D
2D轉換方法:
3D轉換方法:
2、transform-origin 允許你改變被轉換元素的位置
七、過渡與動畫
1、transition
支持瀏覽器:IE 10、Firefox、Chrome(Chrome 25 以及更早的版本,需要前綴 -webkit-)、Opera、Safari( 需要前綴 -webkit-)
2、@keyframes 用於創建動畫。在 @keyframes 中規定某項 CSS 樣式,就能創建由當前樣式逐漸改為新樣式的動畫效果。
支持瀏覽器:IE 10、Firefox、Chrome(Chrome 25 以及更早的版本,需要前綴 -webkit-)、Opera、Safari( 需要前綴 -webkit-)
3、animation
支持瀏覽器:IE 10、Firefox、Chrome(Chrome 25 以及更早的版本,需要前綴 -webkit-)、Opera、Safari( 需要前綴 -webkit-)
八、多列布局
九、用戶界面