CSS圖片圓角框的靈活處理

 

3.2.1  固定寬度的圓角框

最容易建立的是固定寬度的圓角框。它們只需要兩個映像：一個映像用於框的頂部，另一個用於底部。例如，假設希望建立圖3-3這樣的框樣式。

圖3-3  簡單的圓角框樣式

這個框的標記如下：

需要用圖形軟體建立兩個圖3-4這樣的映像：一個映像用於框的頂部，另一個用於底部。這個樣本以及本書中其他所有樣本的代碼和映像可以從www.friendsofed.com下載。

圖3-4  頂部和底部曲線映像

然後，將頂部映像應用於標題元素，將底部映像應用於div框的底部。因為這個框樣式是單色的，所以可以在div框上添加背景顏色，從而形成框的主體。

我們不希望內容碰到框的邊界，所以還需要在div中的元素上添加一些填充：

這個方法對於單色而且沒有邊框的簡單框是有效。但是，如果希望建立像圖3-5這樣更生動的樣式，那麼怎麼辦？

圖3-5  樣式更特殊的圓角框

實際上，可以使用相同的方式，但是這一次不在框上設定背景顏色，而是設定一個重複顯示的背景映像。還需要將底部曲線映像應用到另一個元素上。在這個樣本中，我使用框中的最後一個段落元素：

圖3-6所示為產生的框。因為沒有給這個框設定高度，所以它會隨著文本尺寸的增加進行垂直擴充。

圖3-6  樣式特殊的固定寬度框。框的高度會隨著文本尺寸的增加而擴充

靈活的圓角框

如果加大字型大小，前面的樣本都會垂直擴充。但是，它們不會水平擴充，因為框的寬度必須與頂部和底部映像的寬度一致。如果希望建立靈活的框，那麼需要採用略有不同的方法。不用單一映像組成頂部和底部曲線，而是用兩個相互重疊的映像（見圖3-7）。

圖3-7  如何擴充頂部映像來形成靈活的圓角框

隨著框尺寸的增加，大映像有更多的部分顯露出來，這樣就實現了框擴充的效果。這個方法有時候被稱為滑動門技術（sliding doors technique），因為一個映像在另一個映像上滑動，將它的一部分隱藏起來。這個方法需要更多的映像，所以必須在標記中添加兩個額外的無語義元素。

這個方法需要四個映像：兩個頂部映像組成頂部曲線，兩個底部映像組成底部曲線和框的主體（見圖3-8）。因此，底部映像的高度必須與框的最大高度相同。分別將這些映像命名為top-left.gif、top-right.gif、bottom-left.gif和bottom-right.gif。

圖3-8  建立靈活的圓角框所需的映像

首先，將bottom-left.gif應用於主框div，將bottom-right.gif應用於外邊的div。接下來，將top-left.gif應用於內部的div，將top-right.gif應用於標題。最後，添加一些填充以便在內容周圍形成一點兒空白。

在這個樣本中，我以em為單位設定框的寬度，所以在瀏覽器中增加文本尺寸時框會伸展（見圖3-9）。當然，可以用百分數設定寬度，這使框根據瀏覽器視窗的尺寸進行擴充或收縮。這是彈性和靈活布局背後的主要原則之一，在本書後面會進一步討論這些原則。

圖3-9  靈活的圓角框會隨著文本尺寸的增加進行水平和垂直擴充