CSS box-shadow viene visualizzato solo con il margine

Question

Quindi, il mio sito Web ha un'intestazione e un div contenente Revolution Slider immediatamente dopo. Sto cercando di aggiungere un'ombra di casella sotto l'intestazione e sopra il cursore. Ma non funziona, a meno che non aggiungo anche margin-bottom all'intestazione - ma ciò rende l'intero esercizio discutibile.

Questo è il codice:

#header { 
 
    display:block; 
 
    min-height: 99px; 
 
    background: #FFFFFF; 
 
    border-top: 3px solid #8dddcd; 
 
    border-bottom: 1px solid #ecf0f1; 
 
    line-height: 99px; 
 
    box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3); 
 
} 
 
#rev { 
 
    position: relative; 
 
}

<div id="header"></div> 
 
<div id="rev">the slider</div>

Qualcuno potrebbe aiutarmi a capire che cosa sta causando questo?

Answer 1

In realtà, la questione si rivelò essere correlato a z-index proprietà dei diversi div. Con alcuni ritocchi sono riuscito a risolvere tutto senza utilizzare alcun margine.

In ogni caso, grazie a tutti per il vostro tempo e il vostro aiuto!

Answer 2

Quando si utilizza la modalità di rendering predefinita per box-shadow (ombra esterna), è necessario aggiungere un margine in quella direzione (10px sull'asse y nell'esempio) in modo che il contenuto della casella in overflow sia visibile. Se si desidera visualizzare l'ombra della casella all'interno dell'intestazione, è sufficiente aggiungere la parola chiave inset alla dichiarazione.

Answer 3

Vedi le seguenti domande:

• Does css border-shadow add to an element's size
• Is css box-shadow part of element's box model?

Secondo il box-shadow spec:

Un esterno box-shadow getta un'ombra come se il border- la scatola dell'elemento era opaca. L'ombra è disegnato al di fuori del limite del bordo solo

Quindi, se non si vuole sovrapposizione, dovrete aggiungere il margine youself

#header { 
 
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3); 
 
    margin-bottom: 10px; 
 
} 
 
#slider { 
 
    position: relative; 
 
}

<div id="header">Header</div> 
 
<div id="slider">Slider</div>

Answer 4

Se avete bisogno come si dice l'ombra della casella sotto l'intestazione solo e sopra il cursore è possibile utilizzare meno l'ultimo numero nella casella shadow come il seguente:

box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3); 

Questo farà apparire l'ombra della scatola solo nella parte inferiore.

esempio di lavoro:

#header { 
 
    display:block; 
 
    min-height: 99px; 
 
    background: #FFFFFF; 
 
    border-top: 3px solid #8dddcd; 
 
    border-bottom: 1px solid #ecf0f1; 
 
    line-height: 99px; 
 
    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3); 
 
} 
 
#rev { 
 
    position: relative; 
 
}

<div id="header"></div> 
 
<div id="rev">the slider</div>