CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理(旋轉(zhuǎn)、縮放、傾斜、移動(dòng))、多欄布局、媒體查詢(xún)等。

 

1、邊框特性

 

CSS3對(duì)網(wǎng)頁(yè)中的邊框進(jìn)行了一些改進(jìn)，主要包括支持圓角邊框、多層邊框、邊框色彩與圖片等。在CSS3中最常用的一個(gè)改進(jìn)就是圓角邊框，通過(guò)CSS3的屬性可以快速實(shí)現(xiàn)圓角定義，同時(shí)還可以根據(jù)實(shí)際情況針對(duì)特定角進(jìn)行圓角定義。

 

2、多背景圖

 

CSS3允許使用多個(gè)屬性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一個(gè)元素上添加多層背景圖片。該屬性的應(yīng)用大大改善了以往面對(duì)多層次設(shè)計(jì)需要多層布局的問(wèn)題，幫助Web前端開(kāi)發(fā)者在不借助Photoshop的情況下實(shí)現(xiàn)對(duì)頁(yè)面背景的設(shè)計(jì)，簡(jiǎn)化了背景圖片的維護(hù)成本。
 

 

3、顏色與透明度

 

CSS3顏色模塊的引入，實(shí)現(xiàn)了制作Web效果時(shí)不再局限于RGB和十六進(jìn)制兩種模式。CSS3增加了HSL、HSLA、RGBA幾種新的顏色模式。這幾種顏色模式的提出，在做開(kāi)發(fā)的時(shí)候不僅可以設(shè)置元素的色彩，還能根據(jù)需要輕松地設(shè)定元素透明度。

 

4、多列布局與彈性盒模型布局

 

flexbox(彈性盒子)

 

flexbox(彈性盒子)

 

CSS3多列布局屬性可以不使用多個(gè)div標(biāo)簽就能實(shí)現(xiàn)多列布局。CSS3中的多列布局模塊描述了如何像報(bào)紙、雜志那樣，把一個(gè)簡(jiǎn)單的區(qū)塊拆成多列，并通過(guò)相應(yīng)屬性來(lái)實(shí)現(xiàn)列數(shù)、列寬、各列之間的空白間距。彈性盒模型布局方便了Web前端開(kāi)發(fā)者根據(jù)復(fù)雜的前端分辨率進(jìn)行彈性布局，輕松地實(shí)現(xiàn)頁(yè)面中的某一區(qū)塊在水平、垂直方向?qū)R，是進(jìn)行響應(yīng)式網(wǎng)站開(kāi)發(fā)的一大利器。

 

5、盒子的變形

 

在CSS2.1中，想讓某個(gè)元素變形必須要借助JavaScript寫(xiě)大量的代碼實(shí)現(xiàn)，在CSS3中加入了變形屬性，該屬性在2D或3D空間里操作盒子的位置和形狀，來(lái)實(shí)現(xiàn)例如旋轉(zhuǎn)、扭曲、縮放或者移位。變形屬性的出現(xiàn)，使Web前端中的元素展示不僅僅局限在二維空間，Web前端開(kāi)發(fā)者可以通過(guò)旋轉(zhuǎn)、扭曲、縮放或者移位等操作實(shí)現(xiàn)元素在三維控件上的展示。通過(guò)變形元素，web前端中的內(nèi)容展示更加形象、真實(shí)。

 

6、過(guò)渡與動(dòng)畫(huà)

 

CSS3的"過(guò)渡"(transition)屬性通過(guò)設(shè)定某種元素在某段時(shí)間內(nèi)的變化實(shí)現(xiàn)一些簡(jiǎn)單的動(dòng)畫(huà)效果，讓某些效果變得更加具有流線(xiàn)性與平滑性。CSS3的"動(dòng)畫(huà)"(animation)屬性能夠?qū)崿F(xiàn)更復(fù)雜的樣式變化以及一些交互效果，而不需要使用任何Flash或JavaScript腳本代碼。過(guò)渡與動(dòng)畫(huà)的出現(xiàn)，使CSS在Web前端開(kāi)發(fā)中不再僅僅局限于簡(jiǎn)單的靜態(tài)內(nèi)容展示，而是通過(guò)簡(jiǎn)單的方法使頁(yè)面元素動(dòng)了起來(lái)，實(shí)現(xiàn)了元素從靜到動(dòng)的變化。

 

7、Web字體

 

CSS3中引入了@font-face，@font-face是鏈接服務(wù)器字體的一種方式，這些嵌入的字體能變成瀏覽器的安全字體，開(kāi)發(fā)人員不用再擔(dān)心用戶(hù)沒(méi)有這些字體而導(dǎo)致網(wǎng)頁(yè)在用戶(hù)瀏覽器無(wú)法正常顯示的問(wèn)題。

 

8、媒體查詢(xún)

 

CSS3中引入媒體查詢(xún)(mediaqueries)，可為不同分辨率的設(shè)備定義不同的樣式。比如，在可視區(qū)域小于480像素時(shí)，可能想讓原來(lái)在右側(cè)的網(wǎng)站側(cè)欄顯示在主內(nèi)容的下邊，以往必須通過(guò)JavaScript判斷用戶(hù)瀏覽器的分辨率，然后再通過(guò)JavaScript修改CSS。CSS3中只需要通過(guò)媒體查詢(xún)就可實(shí)現(xiàn)上述操作。

 

9、陰影

 

陰影主要分為兩種:文本陰影(text-shadow)和盒子陰影(box-shadow)。文本陰影在CSS2中已經(jīng)存在，但沒(méi)有得到廣泛的運(yùn)用(CSS2.1中刪除了)。CSS3延續(xù)了這個(gè)特性，并進(jìn)行了新的定義，該屬性提供了一種新的跨瀏覽器解決方案，使文本看起來(lái)更加醒目。CSS3中的盒子陰影的引入，可輕易地為任何元素添加盒子陰影。