Div與邊框圖像

Question

什麼是一個好的方式來設置一個單獨的容器div與它周圍的一些邊界圖像（在我的情況下只在左側，底部和右側）？我把它放在頁面頂部，重疊其他所有東西（就像OSX風格的下拉對話框一樣）。

這裏是基本的佈局：

alt text http://www.nickawilliams.com/images/misc/layout.jpg

這裏就是我這麼遠（我能避免內容的靜態寬/高）：

HTML：

<div class="contentbox"> 
    <div class="contentbox-wrapper" style="width: 400px"> 
     <div class="contentbox-mid" style="height: 200px"> 
      <div class="contentbox-w"></div> 
      <div class="contentbox-content"> 
       Content Box Test 
      </div> 
      <div class="contentbox-e"></div> 
     </div> 
     <div class="contentbox-bottom"> 
      <div class="contentbox-sw"></div> 
      <div class="contentbox-s"></div> 
      <div class="contentbox-se"></div> 
     </div> 
    </div> 
</div> 

CSS：

.contentbox { 
    width: 100%; 
    position: fixed; 
    z-index: 2; 
} 

.contentbox-wrapper { 
    width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.contentbox-mid { 
    height: 100px; 
} 

.contentbox-w { 
    width: 30px; 
    height: 100%; 
    background: transparent url("../../images/contentbox_w.png"); 
    float: left; 
} 

.contentbox-content { 
    width: auto; 
    height: 100%; 
    background: #e8e8e8; 
    float: left; 
} 

.contentbox-e { 
    width: 30px; 
    height: 100%; 
    background: transparent url("../../images/contentbox_e.png"); 
    float: left; 
} 

.contentbox-bottom { 
    width: 300px; 
    height: 30px; 
} 

.contentbox-sw { 
    width: 30px; 
    height: 30px; 
    background: transparent url("../../images/contentbox_sw.png"); 
    float: left; 
} 

.contentbox-s { 
    height: 30px; 
    background: transparent url("../../images/contentbox_s.png"); 
    margin-left: 30px; 
    margin-right: 30px; 
} 

.contentbox-se { 
    width: 30px; 
    height: 30px; 
    background: transparent url("../../images/contentbox_se.png"); 
    float: right; 
    position: relative; 
    bottom: 30px; 
} 

Answer 1

儘管這些都不推薦（混合標記和設計），但通常不會得到最終結果的集成商。但是，您仍然應該儘可能保持一切儘可能乾淨。

雖然如果你的寬度是靜態的（300px？），我建議你將div背景作爲一個垂直重複的大圖像，你的結構幾乎是你可以用於結束的唯一結構。

然後，你會在你的div中有一種頁腳，你可以把兩個底角和底部的圖片都放在一個圖像中。一個裏面沒有5個div，你只能有一個。請注意，在更大的環境中，這也意味着用戶可以並行下載2個圖像（單個主機最多4個），從而使頁面的整體下載速度更快。

如果你的寬度是相對於家長的，或者可以以任何方式改變，這顯然不起作用。

---

編輯：正如它發生你指定的寬度是可變的，我不認爲有一個更清晰的光線方式做HTML明智。

但是，如果您仍然想要最大限度地提高圖像的下載速度，請考慮使用精靈：東西方圖像可以放在同一個較大的圖像中：唯一修改的是背景位置：

background-position: 32px 0px; /* this should move the background to the right */ 

好處是你只需要一張圖片，需要較少的連接下載它們的客戶端（更快），它需要儘可能多的地方。

希望這會有所幫助。

Answer 2

通過使用「滑動門」技術，您可以用少一點的標記來實現此目的。基本上，您只要確保每個角落的圖像足夠大，以至於當盒子達到您期望的最大尺寸時，它們仍會重疊一點。看到這個例子對於圖像的盒子在四個方面：

<style> 
div.box { float: left; } 
div.tl { background: transparent url('topleft.gif') no-repeat top left; padding-top: 8px; padding-left: 8px; } 
div.bl { background: transparent url('bottomleft.gif') no-repeat bottom left; height: 8px; padding-left: 8px; } 
div.tr { background: transparent url('topright.gif') no-repeat top right; padding-right: 8px; } 
div.br { background: transparent url('bottomright.gif') no-repeat bottom right; padding-right: 8px; } 
</style> 

<div class="box"> 
    <div class="tr"> 
     <div class="tl"> 
      Lorem ipsum dolor sit amet... 
     </div> 
    </div>  
    <div class="br"> 
     <div class="bl"></div> 
    </div> 
</div> 

有關只有三面與圖像框的代碼會更簡單，因爲你只需要兩個div將圖像附加到：

<style> 
div.box { float: left; } 
div.bl { background: transparent url('bottomleft.gif') no-repeat bottom left; padding-left: 8px; } 
div.br { background: transparent url('bottomright.gif') no-repeat bottom right; padding-right: 8px; } 
</style> 

<div class="box"> 
    <div class="br"> 
     <div class="bl"> 
     Lorem ipsum dolor sit amet... 
     </div> 
    </div> 
</div> 

這些例子會給你一個有彈性的盒子，可以隨意增長，只要包含角落和邊框的圖像大小足夠。還要注意，包含div的「填充」應該不小於圖像的寬度/角半徑，儘管如果您願意的話它的確可以更大。下面是幾張圖片來說明這種方法。快樂的編碼！

The corner/border graphics http://www.mikrogroove.com/stackoverflow/corners.gif

Images overlapping http://www.mikrogroove.com/stackoverflow/overlapping.gif