css - sombra - sombrear tabla html

Insertar caja-sombra debajo del contenido

Question

No entiendo por qué, pero la sombra de un recuadro está debajo de mi contenido.

Aquí hay un ejemplo:

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

​<div>
   a
</div>​

http://jsfiddle.net/MAckM/

Verás que la a está en la parte superior de la sombra del cuadro.

¿Cómo puedo conseguir que la sombra de la caja esté sobre la a ?

Answer 1

Debes crear un nuevo elemento dentro del div, con posicionamiento absoluto y altura y ancho del 100%, luego dar a ese elemento la sombra del cuadro.

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%;
}​

Aquí hay un JSFiddle .

Editar:

Alternativamente, puedes usar un pseudo elemento:

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 .