ボックスに問題があります-シャドウが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/