css box shadow su un contenitore div interrotto

Question

modifica: domanda più generale: Mi piace l'ombra del riquadro su div, tuttavia quando posiziono un div direttamente al di sotto del div box-shadow'd, quella parte inferiore dell'ombra non si sovrappone in cima nonostante abbia problemi con gli z-index. Quindi sembra che box-shadow non possa sovrapporsi a un altro div? Qualunque idea sarebbe apprezzata!

Question- originale Sto usando progetto per un layout. Ciò significa che c'è un .container di 950px che contiene quindi uno #content.

In questo caso lo #content riempie l'intero contenitore, quindi è anche 950px.

Mi piacerebbe avere un'ombreggiatura sullo #content, ma il problema è che l'ombra viene interrotta poiché non c'è spazio per vederlo nello .container.

Una soluzione alternativa sarebbe quella di diminuire la larghezza dello #content ma che incasina i posizionamenti del layout che ho già, e sembra troppo stretto.

C'è un modo per ottenere l'ombra della casella per ignorare il contenitore genitore e visualizzarlo sopra? Credo che questo non sia un progetto specifico, ma questo è il contesto. Grazie!

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 è direttamente .container. Se metto un'ombreggiatura su #content non riesci a vederlo fino a quando non ridurro la larghezza, che mette in disordine gli elementi interni.

Answer 1

Vorrei aggiungere un po 'di padding all'elemento .container e garantire che il tuo #content resti della larghezza che ti serve.

Answer 2

Si potrebbe fare il .container più ampia (960 è perfettamente accettabile per una larghezza fissa) e mantenere il #content centrato all'interno della .container. Questo rovina qualcosa per te?

Answer 3

Non è necessario il overflow: hidden su .container, poiché si utilizza già una correzione chiara su di esso. Così, si può solo buttarlo via: http://jsfiddle.net/kizu/gDXLf/

Answer 4

Tutto dipende da quello che si sta cercando di ottenere.

Avevo difficoltà con un gruppo di elementi della lista in blocco. L'ombra destra è stata tagliata dalla voce di elenco accanto ad essa su hover

Un semplice trucco è quello di aggiungere solo il seguente all'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

Anche se, questo può funzionare solo per scenari specifici. L'ho solo testato sul mio esempio sopra.