CSS3 caja sombra en la parte superior de los niños

¿Cómo puedo obtener una sombra de caja CSS3 para renderizar encima de sus elementos secundarios?

Problema:

texto alt

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;
}
Author: ЯegDwight, 2010-03-08
Source

4 answers

No se puede hacer directamente desde css.. (no es sombra si va por encima de elementos superpuestos)

Tendrías que volver a trabajar un poco tu html añadiendo un div (o usar un pseudo elemento como sugiere la respuesta de miguelcobain) para superponer la sombra y tu CSS para hacer que el nuevo div tenga 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>
 18
Author: Gabriele Petrioli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:33:26

Para evitar el uso de un elemento adicional, puede usar pseudo-elementos css. Prueba esta 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 a través de 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/grabar funciona bien). Terminé sin usar sombras insertadas en absoluto debido a esto.

 35
Author: miguelcobain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-13 13:04:40

Cambie el color de fondo de cualquier hijo para que también sea RGBA (esto solo se establece en los navegadores que lo entienden, que, convenientemente, es cualquier navegador que puede manejar la sombra): 

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

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

Demo ya que la gente parece estar votando esto sin razón: http://jsfiddle.net/6NrkR /

 4
Author: Mark Kahn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-12 02:08:59

Recomiendo usar box-shadow junto con -moz-box-shadow y -webkit-box-shadow.

Esto es compatible con future (y Opera 10.5;)).

 1
Author: BanksySan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-12 14:12:38