I'm creating a website and I need to style some boxes like this image here. Although, their height aren't fixed for it's dynamic content I used -webkit-border-image
and -moz-image-border
and it worked perfectly. Unfortunately, IE is a bad bad guy and I wanted it to appear properly.
I thought about using CSS3 with box-shadow
and -webkit-gradient
and -moz-linear-gradient
but again IE doesn't work.
I'd like to know some CSS technique so that I can have the gradient box and the shadows within a d开发者_Python百科iv
with undefined size (I mean dynamic height and width)
Here is the possible solution :)
If the width is fixed, and the background is homogenous, this will work even on IE6:
- Take the picture, cut out the middle gradient/white, make it transparent (the shadows should remain opaque), grey to white. Cut it into 2 pieces - the top part which can be stretched to any height without change to looks, and the bottom part with rounded corners (bg-mid.png and bg-bottom.png)
- The top gradient part is also cut as a high, 1 pixel wide image.
- Write this HTML code:
<div class="gradient-bg"> <div class="top-content"> your content </div> <div class="bottom-shadow"> </div> </div>
Then, style them accordingly. Place the gradient image as the top div Background, the bg-mid.png as the top-content background (with repeat-x), and the bottom shadow - that's bg-bottom.png.
For IE6 you'll need to use conditional CSS statements, and filter CSS attribute to load images with alpha channel.
精彩评论