- From: Brian Manthos <brianman@microsoft.com>
- Date: Wed, 17 Aug 2011 23:47:45 +0000
- To: Tab Atkins Jr. <jackalmage@gmail.com>, Jack Smiley <zxcv_890@hotmail.com>
- CC: "www-style@w3.org" <www-style@w3.org>
In case it's useful to others, here was what I replied earlier...
I’ve pieced together some of it by combining snippets of various specs. In the below, “>” means above.
http://www.w3.org/TR/css3-background/#the-box-shadow
In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).
Conclusion:
{border / border-image} > {inset box-shadow} > {background-color / background-image} > {non-inset box-shadow}
http://www.w3.org/TR/2009/CR-CSS2-20090908/visuren.html#layers
Conclusion:
{descendants/content} > {backgrounds & borders}
This looks like the definitive coverage for CSS2.1 though…
http://www.w3.org/TR/2009/CR-CSS2-20090908/zindex.html
{border} > {background-image} > {background-color}
Combining it all together (bottom up)…
1. [Non-inset box-shadow layers]
2. Background-color
3. Background-image [layers]
4. [Inset box-shadow layers]
5. Border
6. Descendants
The [bracketed] entries are new to CSS3.
Received on Wednesday, 17 August 2011 23:48:26 UTC