box-shadow不遵循z-index序列

Question

我在盒子上的問題 - 陰影不跟隨div。

我設置了z-index，但仍然無法正常工作，請幫忙。

箱陰影始終是僞類後面

下面這裏是html代碼：

<div class="img-holder sub-images"> 
<img src="http://dl.dropbox.com/u/80589894/mobileUI/images/flash0.png" /> 
         <div class="back-image"></div> 
        </div> 

CSS：

.img-holder{ 
width:80px; 
height:71px; 
position: relative; 
z-index:1; 
text-align: center; 
margin:10px 15px; 
border:solid 3px #fff; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
-webkit-box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66); 
-moz-box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66); 
box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66); 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 

}

.img-holder img{ 
cursor:pointer; 
max-width:100%; 

}

.sub-images:after{ 
content: " "; 
background:url(http://dl.dropbox.com/u/80589894/mobileUI/images/cat-blank-bg.jpg) top center no-repeat; 
width:100%; 
height:100%; 
position: absolute; 
z-index:-1; 
border:solid 3px #fff; 
top:-3px; 
left: -3px; 
top:0px \9;/* IE 9 */ 
left: 0px \9;/* IE 9 */ 
-ms-transform:rotate(-10deg); /* IE 9 */ 
-webkit-transform: rotate(-10deg); 
-moz-transform: rotate(-10deg); 
transform: rotate(-10deg); 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
-webkit-box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66); 
-moz-box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66); 
box-shadow: 0 1px 5px rgba(15, 15, 15, 0.66); 

}

檢查： http://jsfiddle.net/3WuST/

Answer 1

您需要交換一些CSS的.img-holder和.img-holder img左右。見http://jsfiddle.net/3WuST/1/