css box shadow en un contenedor div cortado

Question

editar: pregunta más general: Me gusta la sombra de caja en divs, sin embargo, cuando coloco un div directamente debajo del div sombreado, esa parte inferior de la sombra no se superpone en la parte superior a pesar de jugar con los índices z. ¿Entonces parece que Box-shadow no puede superponerse a otro div? ¡Cualquier idea sería genial!

pregunta original- Estoy usando un plano para un diseño. Esto significa que hay un .container de 950px que contiene un #content.

En este caso, el #content llena el contenedor por lo que también es 950px.

Me gustaría tener una sombra paralela en el #content, pero el problema es que la sombra se corta ya que no queda espacio para verla en el .container.

Una solución alternativa sería disminuir el ancho de #content, pero eso altera los posicionamientos de diseño que ya tengo, y parece demasiado estrecho.

¿Hay alguna manera de hacer que la sombra de la caja ignore el contenedor primario y aparezca sobre él? Esto no es específico del plan, supongo, pero ese es el contexto. ¡Gracias!

EDIT:

body .container { 
    margin: 0 auto; 
    overflow: hidden; 
    width: 950px; 
} 
body .container:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
#content { 
    display: inline; 
    float: left; 
    margin-right: 0; 
    width: 950px; 
    box-shadow: 0 0 4px black; 
    -moz-box-shadow: 0 0 4px black; 
} 

#content está directamente en .container. Si pongo una sombra paralela en #content no puedes verla hasta que reduzca el ancho, lo que daña los elementos internos.

Answer 1

Agregaría algo de relleno al elemento .container y me aseguraré de que su #content se mantenga en el ancho que necesita.

Answer 2

Puede hacer que el contenedor sea más ancho (960 es perfectamente aceptable para un ancho fijo) y mantener el contenido # centrado dentro del contenedor. ¿Eso estropea algo para ti?

Answer 3

No necesita overflow: hidden en .container, ya que utiliza una solución clara. Entonces, puede tirarlo: http://jsfiddle.net/kizu/gDXLf/

Answer 4

Todo depende de lo que esté tratando de lograr.

Estaba teniendo dificultades con un grupo de elementos de la lista de bloque en línea. La sombra derecha fue cortada por el elemento de la lista junto a él en vuelo estacionario

Un truco sencillo es añadir la siguiente para el elemento:

li:hover { 
    transform: scale(1,1); 
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    -o-transform: scale(1,1); 
    -ms-transform: scale(1,1); 
} 

WORKING EXAMPLE

Aunque, esta solo puede funcionar para escenarios específicos. Solo lo he probado en mi ejemplo anterior.