Sombra de caja de CSS3 encima de los niños

Question

¿Cómo obtengo un recuadro de sombreado de caja CSS3 para representar encima de sus elementos secundarios?

Problema:

HTML:

<div id="chatroom"> 
    <div class="chatmessage"><b>User 1:</b>Test</div> 
    <div class="chatmessage"><b>User 2:</b>Test</div> 
    <div class="chatmessage"><b>User 1:</b>Test</div> 
    <div class="chatmessage"><b>User 2:</b>Test</div> 
</div> 

CSS:

#chatroom{ 
    border: 1px solid #CCC; 
    height: 135px; 
    font-size: 0.75em; 
    line-height: 1.2em; 
    overflow: auto; 
    -moz-box-shadow: inset 0 0px 4px rgba(0,0,0,.55); 
    -webkit-box-shadow: inset 0 0px 4px rgba(0,0,0,.55); 
} 
.chatmessage{ 
    padding: 4px 2px; 
} 
.chatmessage b{ 
    margin-right: 2px; 
} 
.chatmessage:nth-child(2n) { 
    background: #EEE; 
} 

Answer 1

canto se realiza directamente desde css .. (no es la sombra si se va elementos superpuestos superiores)

que se necesita para volver a trabajar su html un poco mediante la adición de un div (o utilizar un elemento seudo según lo sugerido por miguelcobain's respuesta) para superponer la sombra y el CSS para que el nuevo div tener la sombra ..

#chatroom { 
 
    border: 1px solid #CCC; 
 
    height: 135px; 
 
    font-size: 0.75em; 
 
    line-height: 1.2em; 
 
    overflow: auto; 
 
    position: relative; 
 
} 
 

 
.shadow { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    -moz-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55); 
 
    -webkit-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55); 
 
} 
 

 
.chatmessage { 
 
    padding: 4px 2px; 
 
} 
 

 
.chatmessage b { 
 
    margin-right: 2px; 
 
} 
 

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

<div id="chatroom"> 
 
    <div class="chatmessage"><b>User 1:</b>Test</div> 
 
    <div class="chatmessage"><b>User 2:</b>Test</div> 
 
    <div class="chatmessage"><b>User 1:</b>Test</div> 
 
    <div class="chatmessage"><b>User 2:</b>Test</div> 
 
    <div class="shadow"></div> 
 
</div>

Answer 2

recomiendo el uso de box-shadow junto con -moz-box-shadow y -webkit-box-shadow.

Compatible con future (y Opera 10.5;)).

Answer 3

Cambiar el color de fondo de cualquier niño que sea también RGBA (esto sólo se encuentra en los navegadores que lo entienden los que, convenientemente, es cualquier navegador que admita la sombra):

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

Tenga en cuenta que la dos colores (#EEE, RGBA(0, 0, 0, .066)) son idénticos siempre que el fondo detrás de ellos sea blanco.

demo ya que la gente parece estar abajo votando esta sin razón: http://jsfiddle.net/6NrkR/

Answer 4

para evitar el uso de un elemento adicional, se puede utilizar CSS pseudo-elementos. Pruebe esto demo.

#chatroom { 
    position: relative; 
} 

#chatroom:before { 
    content: ""; 

    /* Expand element */ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 

    -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.55); 
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.55); 
    box-shadow: inset 0 0 8px rgba(0,0,0,.55); 

    /* Disable click events */ 
    pointer-events: none; 
} 

Básicamente este CSS crea ese elemento adicional para usted. Observe el pointer-events:none para permitir que los eventos de clic pasen por este elemento.

Tenga en cuenta que pointer-events:none no funciona bien en algunos dispositivos móviles con respecto al desplazamiento táctil (hacer clic/taping funciona bien). Terminé no usando sombras insertadas en absoluto debido a esto.