用css構建一個盒子

Question

我如何在css中做這個盒子？

它可以通過內容增長..

http://img824.imageshack.us/img824/1953/box.gif

感謝

Answer 1

獨立角落，從圖像的其餘部分。內部（有色）應該用透明背景替換。這樣你將有9層。底層將包含重複的梯度圖像，接下來的4層將包含重複和對齊的頂部，右側，底部和左側邊界圖像。最後4層將包含角落。但是使用這種方法，這個盒子的背景應該是均勻的（沒有漸變，沒有圖像），否則你不得不將陰影作爲半透明的圖像放在PNG中，而這種圖像不適用於圓角和邊框。這不適用於IE6。

另一種方法是繪製一張表格，每張圖片3x3。這種方法也適用於IE6。

另一種方法是將盒子的9個div相鄰堆疊起來，並通過讀取中央內容div的大小來設置使用Javascript的非內容div的大小。這種方法也適用於IE6。

所有3種方法都可以使用CSS2垂直和水平調整框的大小。

Answer 2

這將在Firefox中工作。其他瀏覽器中也有類似的屬性可以產生相同的效果。 alt text http://i28.tinypic.com/2d2d6jc.jpg

<div style="-moz-box-shadow: 0 0 2em gray;-moz-border-radius: 5px;border:4px solid white;"> 
    <div style="-moz-border-radius: 5px;background:-moz-linear-gradient(top, #ff0, #fff);"> 
       aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/> 
       aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/> 
       aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/> 
       aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/> 
       aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka shdflkjhasdklf alksdgh aklsj klsjd<br/> 
       aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka shdflkjhasdklf alksdgh aklsj klsjd<br/> 
    </div> 
</div> 

Answer 3

我的建議是使用4名的div和四象：

HTML：

<div id="container"> 
    <div id="top"></div> 
    <div id="content"></div> 
    <div id="bottom"></div> 
</div> 

CSS：

#container { background: transparent url(shadow-repeat.jpg) repeat-y; } 
#top { background: transparent url(top.jpg) no-repeat; } 
#content { background: white url(gradient.jpg) repeat-x; } 
#bottom { background: transparent url(bottom.jpg) no-repeat; } 

• 陰影repeat.jpg是從中間的1px水平切片（v ertically），其包括白色邊界和陰影
• top.jpg是足夠高以覆蓋頂圓角，並且包括黃色背景
• gradient.jpg盒子是1px的垂直切片包括所述梯度從top.jpg的底部到白色
• bottom.jpg高得足以覆蓋底部的圓角，幷包括白色背景。

這個想法是，容器有白色邊框和兩側的投影，垂直重複，讓你垂直擴展。

頂部div有圓角。由於它是一個JPG格式，它將覆蓋容器背景的硬角，並且位置正確，它仍然看起來很平滑。底部的div也是一樣。

另一個技巧是水平重複的垂直切片。如果內容div位置正確，則可以將它排列起來，使其看起來很平滑。由於它還具有白色背景，因此它將覆蓋由容器的重複背景留在中間的所有殘留物。

這可能需要一點與利潤率和定位亂搞得到的權利，但它的基本思想

編輯 請注意，您還必須設置所有div的寬度，和＃的高度頂部和底部。