如何添加一個背景使用看起來像一個div的每邊的邊框的CSS圖像

Question

基本上我想創建一個自定義邊框，沿着我的內容div的左側和右側。我設法創造了一半有效的東西。我得到的問題對齊divs，以便與內容div齊平，看起來像邊框，而不是浮動線。這很難解釋，所以請看看我想要的攻擊圖像。

乾杯

希望我已經有所瞭解。

alt text http://www.webquark.co.uk/shadowed-borders.jpg

Answer 1

該基本技術被稱爲'人造色譜柱'，並在article with the same name中解釋。本文將介紹如何使用浮動側邊欄來「掩蓋」，但這與您希望實現的基本原則相同。

Answer 2

你應該創建一個覆蓋2個陰影寬1個像素高度的位圖，並把它作爲你的最外層div的背景（或者你可以把它放在屍體）。居中並將background-repeat設置爲repeat-y。

該技術用於例如this site。它使用這個CSS：

body { 
    background-attachment: scroll; 
    background-repeat: repeat-y; 
    background-position: 50% 0px; 
    background-color: #e8b36d; 
    background-image: url("images/bg_center_orange.gif"); 
} 

Answer 3

創建一個PNG一樣寬，你的包裹股利，並設置爲背景，以包：

CSS：

div#wrap { 
    background: url('drop-shadow.png') repeat-y; 
    width: // the width of #wrap should be the same as the width of the background image 
} 

HTML：

<div id="wrap"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div> 

您可能需要在內部div上留出一些空白或填充以便內容不會遮蓋陰影。