box-shadow on top of children

Question

How do I get an inset CSS3 box-shadow to render on top of its children elements?

Problem:

HTML:

Answer 1

Change the background-color of any children to also be RGBA (this only gets set in browsers that understand it which, conveniently, is any browser that can handle the shadow):

.chatmessage:nth-child(2n) {
    background : #EEE;
    background : RGBA(0, 0, 0, .066);
}

Note that the two colors (#EEE, RGBA( 0, 0, 0, .066)) are identical as long as the background behind them is white.

Demo since people seem to be down voting this for no reason: http://jsfiddle.net/6NrkR/