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?
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;
}
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}<div class="box"></div>