Вставка тень под содержимым

Я не понимаю, почему, но тень вставки находится под моим контентом.

Вот пример:

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

<div>
   a
</div>

http://jsfiddle.net/MAckM/

Вы видите, что a находится поверх тени окна.

Как я могу получить тень окна над a?

Ответ 1

Вам нужно создать новый элемент внутри div, с абсолютным позиционированием и высотой и шириной 100%, затем придать этому элементу тень окна.

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

Вот JSFiddle.

Edit:

В качестве альтернативы вы можете использовать псевдоэлемент:

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.