css box shadow + transparent background images = intuitive breakdown - transparency

Question

I have a button image I'm using as a background image for some links.
The background image has rounded corners.
I want to use a css drop shadow instead of putting the drop shadow in the image
The problem is, the drop shadow appears to be drawn around the element. Although I kind of expected to see the drop shadow color through the transparent parts of the background image, I'm seeing the background color instead (see this jsfiddle).
My actual goal is a little more complex, but if I can satify my first three bullet points then I can nail this task. Specifically, what I want to do is use two nested elements with background images of the right and left parts of a button image (rounded corners) so that I can use the same css to wrap a 'button' around text of any length. Since the backgrounds overlap in a css 'sliding doors' style, a png alpha drop shadow shows a 2x dark section where the images overlap. Soo.. I thought I'd use a css shadow, but as you can see in the jsFiddle, there are problems with that too.
Any ideas?

Answer 1

Box-shadows don't show through transparent backgrounds. A more simple test case would be:
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: transparent;
box-shadow: 0 0 10px #000;
}​
The output expected would be a nice blurred black square right? Well... no, it's a white square with a dropshadow. http://jsfiddle.net/UjhrW/
To achieve what you want to do you will need separate markup for the dropshadow, fill it with white, and then set the spill of the shadow so it looks like a blurry square...
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}​
http://jsfiddle.net/Etmty/
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}
<div class="box"></div>