Boîte à encart-ombre sous le contenu

Je ne comprends pas pourquoi, mais une ombre de boîte d'encart est sous mon contenu.

Voici un exemple: 

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



​<div>
   a
</div>​

Http://jsfiddle.net/MAckM/

Vous voyez le a est au-dessus de la zone d'ombre.

Comment puis-je obtenir l'ombre de la boîte pour être au-dessus de la a?

24
demandé sur henryaaron 2012-11-02 07:19:35

1 réponses

Vous devez créer un nouvel élément à l'intérieur de la div, avec un positionnement absolu et une hauteur et une largeur de 100%, puis donner à cet élément l'ombre de la boîte.

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

Voici un JSFiddle.

Modifier:

Vous pouvez également utiliser un pseudo élément:

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.

28
répondu fncombo 2012-11-02 18:18:22