box-shadow 不遵循 z-index 序列

Question

我有关于 box-shadow 的问题是不遵循 div。

我设置了 z-index 但还是不行，请帮忙。

box-shadow 总是在伪类后面

下面是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

您需要在.img-holder 和.img-holder img 中交换一些CSS。见http://jsfiddle.net/3WuST/1/