《基于新信息技術(shù)的HTML5和CSS3網(wǎng)頁設(shè)計進(jìn)階教程》課件-第8章

第8章CSS3邊框變換8.1瀏覽器支持情況8.2圓角邊框8.3盒子陰影8.4圖片邊框

在基礎(chǔ)教程中，我們學(xué)習(xí)過CSS的框模型，可以設(shè)置邊框的寬度、顏色和樣式。在本章內(nèi)容中，我們將學(xué)習(xí)邊框更多更華麗的變換，具體包括：

●

border-radius：圓角邊框。

●

box-shadow：盒子陰影。

●

border-image：圖片邊框。

8.1瀏覽器支持情況

目前，所有瀏覽器都支持邊框變換屬性，而IE10及之前的版本不支持border-image屬性，同時border-image屬性在Safari和Opera瀏覽器中的表現(xiàn)也不盡如人意。因為設(shè)置border-image屬性后，會覆蓋border-style屬性。

主流瀏覽器對邊框變換屬性支持情況如表8-1所示。

8.2圓角邊框

在CSS2以前的時代要制作出圓角邊框是比較復(fù)雜的，需要為四個角指定不同的圖片。但在CSS3中，創(chuàng)建圓角邊框是非常容易的，只需要使用一條CSS3新增的屬性border-radius即可。

頁面顯示效果如圖8-1所示。

圖8-1CSS圓角邊框頁面效果

以上代碼中，設(shè)置圓角邊框的關(guān)鍵屬性為：

border-radius屬性是一個簡寫屬性，用于設(shè)置以下4個border-*-radius屬性：

●?border-top-left-radius：設(shè)置左上角圓角屬性。

●?border-top-right-radius：設(shè)置右上角圓角屬性。

●?border-bottom-right-radius：設(shè)置右下角圓角屬性。

●?border-bottom-left-radius：設(shè)置左下角圓角屬性。

border-radius屬性的值收兩種類型：

●

長度單位：長度單位最大值為width和height兩個屬性中較小那個的一半，如果超出則顯示最大值效果。

●

百分比：最大值為50%，如果width和height兩個值不同，則圓角會不對稱。

頁面顯示效果如圖8-2所示：

圖8-2CSS圓角邊框頁面效果

每部分的值最多接收4個，分別依次設(shè)置top-left、top-right、bottom-right、bottom-left。如果省略bottom-left，則其值與top-right相同；如果省略bottom-right，則其值與top-left相同；如果省略top-right，則其值與top-left相同。如以上代碼將border-radius屬性修改為：

頁面顯示效果如圖8-3所示。

圖8-3CSS圓角邊框頁面效果

8.3盒子陰影

在CSS3中，新增了box-shadow屬性，用于向方框添加陰影。

該屬性的值由2個必需值和4個可選值組成：

●

h-shadow：必需值。設(shè)置陰影的水平位置，值為長度單位，正值為向左偏移，負(fù)值為向右偏移。

●

v-shadow：必需值。設(shè)置陰影的垂直位置，值為長度單位，正值為向下偏移，負(fù)值為向上偏移。

●

blur：可選值。設(shè)置模糊距離，值為長度單位，默認(rèn)為0，不模糊。

●

spread：可選值。設(shè)置陰影的尺寸，默認(rèn)尺寸為0，陰影與盒子等大。

●

color：可選值。設(shè)置陰影的顏色，默認(rèn)為黑色。

●

inset：可選值。默認(rèn)為陰影在外部，設(shè)置此值，則陰影出現(xiàn)在內(nèi)部。

頁面顯示效果如圖8-4所示。

圖8-4CSS盒子陰影頁面效果圖8-5CSS盒子陰影頁面效果

在設(shè)置的陰影在內(nèi)部時，一般不設(shè)置橫向和縱向位移，將上面的代碼修改為以下形式：

頁面顯示效果如圖8-6所示。

圖8-6CSS盒子陰影頁面效果

8.4圖片邊框

CSS3除了可以設(shè)置圓角邊框和盒子陰影外，還能使用圖片作為框模型的邊框。使用border-image屬性可以將表格的邊框設(shè)置為圖片。需要注意的是，此屬性在Safari和Opera瀏覽器中會覆蓋border-style屬性。

border-image屬性是一個簡寫屬性，用于設(shè)置以下屬性：

●?border-image-source：設(shè)置用在邊框的圖片的路徑。

●?border-image-slice：設(shè)置圖片邊框向內(nèi)的偏移。

●?border-image-width：設(shè)置圖片邊框的寬度。

●?border-image-outset：設(shè)置邊框圖像區(qū)域超出邊框的量。

●?border-image-repeat：設(shè)置圖像邊框是否應(yīng)平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。默認(rèn)值為拉伸。

8.4.1border-image-source

border-image-source用于設(shè)置border-image的背景圖片路徑，使用url()方法調(diào)用，其中一般使用相對路徑引用圖片。

8.4.2border-image-slice

border-image-slice用于設(shè)置圖片邊框向內(nèi)的偏移，可以理解為圖片剪裁位置，它類似于CSS中的clip屬性，有1~4個參數(shù)，分別代表左上、右上、右下、左下四個方位的剪裁，符合CSS普遍的方位規(guī)則(與margin、padding或border-width一致)。同時，它接收兩種類型的值：像素和百分比。

它會將背景圖片進(jìn)行切割，距離圖片上部30%的地方，距離右邊35%，距離底部40%，距離左邊30%的地方各剪裁一下。也就是說，對圖片進(jìn)行了“四刀切”，形成了九個分離的區(qū)域，這就是九宮格，是下面深入講解border-image的基礎(chǔ)。border-image-slice切割示意圖如圖8-7所示。

圖8-7border-image-slice切割示意圖

8.4.3border-image-repeat

border-image-repeat用于設(shè)置背景圖片如何貼圖，它有3個值：平鋪、鋪滿或拉伸。這3個值對應(yīng)的貼圖方式是不同的。為了方便演示，我們設(shè)計了圖8-8所示的背景圖片。

通過裁切屬性值，將邊框背景圖切出了“九宮格”的模型(如圖8-9所示)，那這張背景圖怎么對應(yīng)地貼在邊框上呢？

圖8-8圖片邊框背景圖片圖8-9圖片邊框背景裁切示意圖

如圖8-10所示，在border-image中的四個邊角，即1號、3號、6號、8號位置，它們只會待在border的四個角上，并且水平和垂直方向均被拉伸來填充border的四個角；上下區(qū)域即2號和7號位置受到第一個參數(shù)——水平方向效果影響，如果為repeat，則此區(qū)域被水平重復(fù)(round水平平鋪，stretch水平拉伸)來填充對應(yīng)的上下border；左右區(qū)域即4號和5號位置效果和border-right-image的作用相同。

圖8-10border-image-repeat:repeat示意圖

8.4.4border-image-width

border-image-width此屬性默認(rèn)是邊框的寬度，用來限制相應(yīng)區(qū)域背景圖的范圍，相應(yīng)背景區(qū)域的圖像會根據(jù)這個屬性值進(jìn)行縮放，然后再重復(fù)或平鋪或拉伸。

8.4