How to create a dynamic box with shadow - using PNG pictures

I would like to create a box and its shadow without using box-shadow css property to support old browsers too.

Which is the best way to do this?

Is this structure good? If yes, how can I set "bx3" image to be repeated until "bx4"?

        <div class="wbx">
            <div class="bx1">
                <h2>Title</h2>
                <p>Text</p>
            </div>
            <div class="right_shadow">
                <div class="bx2"></div>
                <div class="bx3"></div>
            </div>
            <div class="bottom_shadow">
                <div class="bx4"></div>
                <div class="bx5"></div>
                <div class="bx6"></div>
            </div>
        </div>

1: the box 2,3: right part (top, center (repeated) 4,5,6: bottom part (left,center (repeated),right)

Here is an example t开发者_如何学编程o Lollero's answer: http://jsfiddle.net/kRCA7/22/

.top-right{
width:16px;
height:16px;
background-color:blue;
right: 0px;
top:-16px;    
}
.right{
    background: url(http://jsfiddle.net/img/social-icons/facebook_16.png) repeat-y 0 0;
    /*background-color:cyan;*/
    right:0px;
    top:0px;
    width:16px;
    height:100%;
}

Heres a little hint.

http://jsfiddle.net/kRCA7/

HTML:

<div class="ShadowWrap">
    <div class="borderWrap">
        <span class="top"></span>
        <span class="right"></span>
        <span class="bottom"></span>
        <span class="left"></span>

        <span class="top-right"></span>
        <span class="bottom-right"></span>
        <span class="bottom-left"></span>
        <span class="top-left"></span>
    </div>

    <p style="margin: 0px; padding: 10px; ">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit.
    </p>    
</div>

CSS:

.ShadowWrap { position: relative; }
.borderWrap span { position: absolute }

/* For every .borderWrap span element use these attributes: top, right, bottom, left and use minus values in them to position them in the right corners like shown below */

.top { 
    top: /* 0px or other value that places the top where you want */; 
    left: /* 0px or other value that places the left side where you want */; 
    right: /* 0px or other value that places the right side where you want */; 
}

Note that this structure is for all sides.. but you can just delete the sides and corners that you dont need...

Edit: Actually the tag .borderWrap might cause unwanted side effects on some situations on some browsers.. not quite sure.. you could just assign position absolute on each border element individually or give them all common class like and then .shadow { position: absolute /* And some other attributes you might want to include */ }

If you must have old IE compatiblity, use a Shadow filter. JSFiddle example.

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);