Opacity, Shadow and Rounded-corner control over rendered objects make CSS3 exciting stuff. Imagine creating a beautiful website with all these features, without using an image editing program! (ok, throw in @font-face and you have the font of your choice on the webpage as well. That’s it. Image editing is out)
Its safe to assume that not all developers will be using these features for mainstream websites unless our very dear IE supports them. So we still have time to see these beauties in action. But we have a lot of gray area for what happens when these are used together. The implementations are still juggling with these questions.
For example, what happens when opacity of a box is 50% and a drop-shadow attribute is used for the box? Or, what happens when a shadow drops on a box which is having less opacity? Should the shadow have rounded corners for a box with rounded corners? How should a shadow with bigger fade (black to transparent area) render on a shadow with smaller fade?
These are just some tricky “beginner” questions with no straight answers. Fortunately the community is pretty enthusiastic about rendering these effects with markup. Lot of such issues and fundamentals have been discussed.
In an image editor you can manipulate the effect rendered depending on which operation you perform first. This is not really clear for CSS, and with browser implementations which can vary, it might be a bit of a hassle for us to have consistent cross-browser CSS3 markup ready to use.