我如何製作一個靈活的div在css背景

Question

我想創建一個靈活的div與背景如下所示，任何關於如何在CSS中可以做到這一點的建議？

Answer 1

爲了達到最佳的跨瀏覽器的兼容性，我建議削減箱成三塊：

頂和底部並沒有改變。中間的一個應該有3px高度和全寬並且重複到y軸。

<div id="shadowbox"> 
    <div class="content">Your Content here</div> 
    <div id="boxending"><!-- --></div> 
</div> 

#shadowbox { 
background: url(box_top_bg.gif) 0 0 no-repeat; 
} 

#shadowbox.content { 
    background: url(box_content_bg.gif) 0 0 repeat-y; 
    margin-top: //as high, as the top picture is 
} 

#boxending { 
    background: url(box_bottom_bg.gif) 0 0 no-repeat; 
} 

如果您沒有使用重置樣式表，則可能會出現空格顯示行高問題。看看這個！