如何从此图像制作可垂直扩展的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/