box-shadow不遵循z-index序列

时间:2013-01-21 06:58:09

标签: html5 css3

我有关于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/

1 个答案:

答案 0 :(得分:0)

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