Building a box with css

How can i do this box in css开发者_开发百科?

it could grow by content..

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

Thanks

---

My suggestion would be to use four divs, and four images:

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; }

• shadow-repeat.jpg is a 1px horizontal slice from the middle (vertically) of the box that includes the white border and the drop shadow
• top.jpg is tall enough to cover the top rounded corners, and includes the yellow background
• gradient.jpg is a 1px vertical slice that includes the gradient from the bottom of top.jpg to white
• bottom.jpg is tall enough to cover the bottom rounded corners, and includes the white background.

The idea is that the container has the white border and the drop shadow on the sides, which repeats vertically, giving you vertical expansion.

The top div has the rounded corners. Since it's a jpg, it will cover the hard corners of the container's background, and positioned correctly, it will still look smooth. The same goes for the bottom div.

The other trick is the horizontally repeated vertical slice of gradient. If the content div is positioned correctly, you can line it up such that it still looks smooth. Since it also has a white background, it will cover any remnants that are left in the middle by the container's repeated background.

This may take a little messing around with margins and positioning to get right, but it's the basic idea

Edit Please note that you will also have to set widths of all divs, and heights of #top and #bottom.

---

this will work in firefox. there are similar properties in other browser which can create the same effect.

<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>

---

Separate the corners from the rest of the image. The interior (which is colored) should be replaced with transparent background. That way you will have 9 layers. The bottom layer will contain the gradient image repeated, The next 4 layers will contain the top, right, bottom and left border-images with repeat and alignment. The last 4 layers will contain the corners. But using this method the background of this box should be homogeneous (no gradient, no image), otherwise you'd have to place the shadow as a semi-opaque image in PNG, which won't work with rounded corners and border. This won't work with IE6.

Another way is to draw a table, 3x3, with each image. This method will work with IE6 too.

Another way is to stack the 9 divs of the box adjacently, and set the size of the non-content divs using Javascript, by reading the size of the central, content div. This method will as well work with IE6.

All 3 methods provide a possibility to resize the box both vertically and horizontally, using CSS2.