2.4 CSS 3的新特征

從2010年開始，HTML5和CSS 3就一直是互聯網技術中最受關注的兩個話題。CSS 3是CSS技術的一個升級版本，是由Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems等許多Web界的巨頭聯合組成的一個名為CSS Working Group的組織共同協商策劃的。雖然目前很多細節還在討論中，但還是不斷地向前發展著。

2.4.1 模塊與模塊化結構

在CSS 3中，并沒有采用總體結構，而是采用了分工協作的模塊化結構。采用這種模塊化結構，是為了避免產生瀏覽器對于某個模塊支持不完全的情況。如果把整體分成幾個模塊，各瀏覽器可以選擇支持哪個模塊，不支持哪個模塊。例如，普通電腦中的瀏覽器和手機上用的瀏覽器應該針對不同的模塊進行支持。如果采用模塊分工協作，不同設備上所用的瀏覽器都可以選用不同模塊進行支持，方便了程序的開發。CSS 3中的常用模塊如表2.7所示。

2.4.2 一個簡單的CSS 3實例

對CSS 3中模塊的概念有了一定的了解之后，本節通過實例為大家介紹CSS 3與CSS 2在頁面設計中的區別。

在CSS 2中如果要對頁面中的文字添加彩色邊框，可以通過DIV層來進行控制。

【例2.20】 在CSS 2中使用DIV層對頁面中的文字添加彩色邊框。（實例位置：資源包\TM\sl\2\13）

在Firefox瀏覽器中運行該實例，結果如圖2.22所示。

在CSS 3中添加了一些新的樣式，例如本實例中的邊框，就可以通過CSS 3中的border-radius屬性來實現。border-radius屬性指定好圓角的半徑，即可繪制圓角邊框。

【例2.21】 在CSS 3中使用border-radius屬性對頁面中的文字添加邊框。（實例位置：資源包\TM\sl\2\14）

在Firefox瀏覽器中運行該實例，結果如圖2.23所示。

在上面的兩個實例中，都是對頁面中的文字添加了邊框，但是如果在這兩個實例中多添加幾行文字，即可發現運行結果的變化，如圖2.24和圖2.25所示。

從圖2.24和圖2.25中的運行結果不難看出CSS 2與CSS 3的區別，對于界面設計者來說，這無疑是個好消息。在CSS 3中新增的各種各樣的屬性，可以擺脫CSS 2中存在的很多束縛，從而使整個網站的界面設計進入一個新的臺階。