pg欢乐嘉年华赢钱了吗

書名： HTML 5與CSS 3權威指南（第4版·下冊）
作者名：陸凌牛
本章字數： 1531字
更新時間： 2019-03-04 18:29:49

15.2　使用CSS 3能做什么

15.2.1　模塊與模塊化結構

在CSS 3中，并沒有采用總體結構，而是采用了分工協作的模塊化結構，這些模塊如表15-1所示。

表15-1　CSS 3中的模塊

那么，為什么需要分成這么多模塊來進行管理呢？

這是為了避免產生瀏覽器對于某個模塊支持不完全的情況。如果只有一個總體結構，這個總體結構會過于龐大，在對其支持的時候很容易造成支持不完全的情況。如果把總體結構分成幾個模塊，各瀏覽器可以選擇對于哪個模塊進行支持、對哪個模塊不進行支持，支持的時候也可以集中把某一個模塊全部支持完了再支持另一個模塊，以減少支持不完全的可能性。

例如，臺式計算機、筆記本和手機上用的瀏覽器應該針對不同的模塊進行支持。如果采用模塊分工協作的話，不僅是臺式計算機，各種設備上所用的瀏覽器都可以選用不同模塊進行支持。

15.2.2　一個簡單的CSS 3示例

現在，我們已經對CSS 3的模塊和模塊化結構有了一個初步的認識，那么，究竟我們能夠用CSS 3來做些什么呢？

這里，我們通過一個示例來將CSS 2與CSS 3做一個對比，借此使大家對CSS 3有一個初步的印象。

在這個示例中，我們給頁面上的某個div區域添加一個彩色圖像邊框，這樣可以使這個區域看上去漂亮很多，生動很多。

在CSS 2中，當然可以實現這個效果，如代碼清單15-1所示。

代碼清單15-1　使用CSS 2給div區域添加圖像邊框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
#image-boarder{
margin:3px;
width:450px;
height:104px;
padding-left:14px;
padding-top:20px;
background:url(test.png);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="image-boarder">
 ·示例文字1<br/>
 ·示例文字2<br/>
 ·示例文字3<br/>
 ·示例文字4<br/>
</div>
</body>
</html>

這段代碼在Firefox瀏覽器中的運行結果如圖15-1所示。

接下來，我們看一下在CSS 3中如何實現這個功能。

在CSS 3中，添加了很多新的樣式，譬如可以創建圓角邊框，可以在邊框中使用圖像，可以修改背景圖像的大小，可以對背景指定多個圖像文件，可以修改顏色的透明度，可以給文字添加陰影，可以在CSS中重新指定表單的尺寸等。

在代碼清單15-2中，我們使用CSS 3來實現與代碼清單15-1相同的功能。具體操作的時候，只要給頁面中的div元素增加一個border-image屬性，然后在該屬性中指定圖像文件與邊框寬度就可以了。

代碼清單15-2　使用CSS 3給div區域添加圖像邊框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
#image-boarder{
width:450px;
padding-top:20px;
padding-left:14px;
border-image:url(test.png) 30 30 30 30 130px;           // 指定邊框圖像
}
</style>
</head>
<body>
<div id="image-boarder">
 ·示例文字1<br/>
 ·示例文字2<br/>
 ·示例文字3<br/>
 ·示例文字4<br/>
</div>
</body>
</html>

這段代碼的運行后結果與圖15-1所示結果相同。

雖然目前看來兩種方法都達到了同樣的效果，只是實現方法不同而已。但是如果再在div中增加一行文字，我們看一下使用CSS 2中的樣式表后會是什么情況，如圖15-2所示。

圖15-1　使用CSS 2樣式添加圖像邊框

圖15-2　使用CSS 2樣式表，當文字超過圖像高度時的頁面外觀

同樣，來看一下使用CSS 3中的樣式表后會是什么情況，如圖15-3所示。

為什么在CSS 3中文字沒有超出邊框圖像之外？這是因為在CSS 3樣式表中，在指定邊框圖像的同時，也指定了圖像允許拉伸來自動適應div區域的高度，而不是采取CSS 2中將div區域高度設為邊框圖像高度的方式。那么，也許有人會問，如果在CSS 2的div元素的樣式代碼中不指定div區域的高度是否可以呢？這樣的話就會出現如圖15-4所示的情況。

圖15-3　使用CSS 3樣式表，當文字超過圖像高度時的頁面外觀

圖15-4　在CSS 2的樣式代碼中不指定div區域高度的效果

從圖中可以看出，當只有一行文字的時候，該邊框圖像又不能完全顯示了。因此，當div區域中的文字高度處于不斷變化的狀態時，使用CSS 2樣式表添加邊框圖像的操作相對來說就比較麻煩。在CSS 3中考慮到了這種情況，添加了允許邊框圖像自動拉伸的屬性，從而解決了這個問題。

關于如何使用border-image這個屬性，我們將在后面進行詳細介紹。在這里，我們通過這個示例，向大家表明了目前在CSS 2中一些比較難以處理的情況，在CSS 3中通過使用新增屬性很容易就能夠解決。

這對界面設計來說，無疑是一件非常可喜的事情。在界面設計中，最重要的就是創造性，如果能夠使用CSS 3中新增的各種各樣的屬性，就能夠在頁面中增加許多CSS 2中沒有辦法解決的樣式，擺脫現在界面設計中存在的許多束縛，從而使整個網站或Web應用程序的界面設計進入一個新的臺階。

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

HTML 5與CSS 3權威指南（第4版·下冊）

15.2 使用CSS 3能做什么

15.2.1 模塊與模塊化結構

15.2.2 一個簡單的CSS 3示例

15.2　使用CSS 3能做什么

15.2.1　模塊與模塊化結構

15.2.2　一個簡單的CSS 3示例