CSS3中新增的內容


(整理中······)

一、選擇器

新增的偽類

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-)

 

八、多列布局

 

九、用戶界面

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM