如何從此圖像製作可垂直擴展的DIV框？

Question

我想從這個圖像創建一個風格DIV盒子，我的網站：

我怎樣才能做到這一點使用CSS和HTML。

我砍了圖像在三個不同的部分：

• 

• 

• 

但是我不知道如何使用它們與Divs創造我的垂直消耗箱。

感謝您的幫助！

Answer 1

這可能與CSS3功能，如邊界半徑，箱陰影和梯度來完成。這是一個example。應該在Opera，Firefox，Chrome和Safari中工作。另外，你可以用：before和：在CSS僞元素之後，就像在其他兩個答案中一樣。

編輯：對於Internet Explorer，所有這些功能都可以使用行爲文件，如PIE。

Answer 2

試試這個： HTML：

<div class="container"> 
<div class="top"></div> 
<div class="middle">content here content here content here</div> 
<div class="bottom"></div> 
</div> 

CSS：

.container { width: 300px; } 
.top { padding-top: 15px; background: url(topimage.png); } 
.middle { background: url(middleimage.png); } 
.bottom { padding-bottom: 15px; background: url(bottomimage.png); } 

調整墊襯的CSS，使它們符合您topimage和底圖的高度和容器的寬度，使它匹配圖像的寬度。

Answer 3

使用三個獨立的div，並將中間的頂部填充設置爲頂部的頂部填充高度。所以：

#top-div { 
    height: 25px; 
    background-image: url(bg-top.jpg); 
} 
#middle-div { 
    background-image: url(bg-middle.jpg); 
    padding-top: -25px; 
} 
#bottom-div { 
    background-image: url(bg-bottom.jpg); 
} 

Answer 4

我假設你希望你的前一個內啓動，但擴展到第二個爲好。如果是這種情況，那麼你需要在背景圖像上重疊一些。

HTML

<div class="expandable"> 
    <div class="content top">content goes here</div> 
    <div class="bottom"></div> 
</div> 

CSS

.expandable{ 
    background:url('middle-image.jpg') 0 0 repeat-x; 
} 
.top{ 
    background:url('top-image.jpg') 0 0 no-repeat; 
    height:auto!important; 
    height:100px;/* whatever the height of the top (big) area is */ 
    min-height:100px; /* whatever the height of the top (big) area is */ 
} 
.bottom{ 
    background:url('bottom-image.jpg') 0 0 no-repeat; 
    height:10px; /* whatever the height of the bottom image is. */ 
} 

例在http://www.jsfiddle.net/gaby/s8XZQ/