Edit Question - KnowledgeHub

Title Body

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?

Tags (comma-separated) Cancel