Riquadro riquadro ombreggiato sotto il contenuto

Question

Non capisco perché, ma un'ombra di riquadro inserita è al di sotto del mio contenuto.

Ecco un esempio:

div { 
    box-shadow:inset 0 0 10px black; 
    height:300px; 
    color:red; 
} 

​<div> 
    a 
</div>​ 

http://jsfiddle.net/MAckM/

Si vede il a è sulla parte superiore della scatola di ombra.

Come è possibile ottenere l'ombra della scatola in cima allo a?

Answer 1

È necessario creare un nuovo elemento all'interno del div, con posizionamento e altezza e larghezza del 100% assoluti, quindi assegnare all'elemento l'ombra del riquadro.

HTML:

<div> 
    <div></div> 
    a 
</div>​ 

CSS:

div { 
    height:300px; 
    color:red; 
    position:relative; 
} 

div div { 
    box-shadow:inset 0 0 10px black; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}​ 

Ecco un JSFiddle.

Edit:

In alternativa, è possibile utilizzare un elemento pseudo:

HTML:

<div> 
    a 
</div>​ 

CSS:

div { 
    height:300px; 
    color:red; 
    position:relative; 
} 

div:before { 
    content:''; 
    display:block; 
    box-shadow:inset 0 0 10px black; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}​ 

JSFiddle.