游戏交易平台

書名： Java Web從入門到精通（第2版）
作者名：明日科技
本章字數： 996字
更新時間： 2020-11-28 17:38:16

2.4 CSS 3的新特征

視頻講解：光盤\TM\lx\2\04 CSS 3的新特征．mp4

HTML 5和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.7 CSS 3中的模塊

2.4.2 一個簡單的CSS 3實例

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

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

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

關鍵代碼如下：

        <title>使用CSS2對頁面中的文字添加彩色邊框</title>
        <style>
            #boarder {
                margin:3px;
                width:180px;
                padding-left:14px;
                border-width:5px;
                border-color:blue;
                border-style:solid;
                height:104px;
            }
        </style>
        </head>
        <body>
            <div id="boarder"> 文字一<br>
              文字二<br>
              文字三<br>
              文字四<br>
              文字五<br>
            </div>
        </body>

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

圖2.22 使用CSS 2對頁面中的文字添加邊框

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

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

關鍵代碼如下：

        <style>
            #boarder {
                border:solid 5px blue;
                border-radius:20px;
                -moz-border-radius:20px;
                padding:20px;
                width:180px;
            }
        </style>
        </head>
        <body>
            <div id="boarder"> 文字一<br>
              文字二<br>
              文字三<br>
              文字四<br>
              文字五<br>
            </div>
        </body>

說明

在使用border-radius屬性時，如果使用Firefox瀏覽器，需要將樣式代碼書寫成“-moz-border-radius”；如果使用Safari瀏覽器，需要將樣式代碼書寫成“-webkit-border-radius”；如果使用Opera瀏覽器，需要將樣式代碼書寫成“border-radius”；如果使用Chrome瀏覽器，需要將樣式代碼書寫成“border-radius”或“-webkit-border-radius”的形式。

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

圖2.23 使用CSS 3對頁面中的文字添加邊框

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

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

圖2.24 CSS 2中文字超過邊框高度

圖2.25 CSS 3中邊框自動延長

官术网_书友最值得收藏!

Java Web從入門到精通（第2版）

2.4 CSS 3的新特征

2.4.1 模塊與模塊化結構

2.4.2 一個簡單的CSS 3實例