0

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

4

1 回答 1

0

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

于 2013-01-21T07:08:47.343 回答