內容下方的內嵌框陰影

Question

我不明白爲什麼，但內嵌框陰影在我的內容下。

下面是一個例子：

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

​<div> 
    a 
</div>​ 

http://jsfiddle.net/MAckM/

你看a是包裝盒上的陰影的頂部。

我怎樣才能得到箱子陰影在a之上？

Answer 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。

編輯：

或者，你可以使用僞元素：

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。