5
我试图旋转一个div,我已经应用了'页面卷曲'阴影。css页面卷曲效果阴影与旋转
页面卷曲阴影效果工作正常,直到我旋转div,此时阴影元素通过div(z-index问题)显示?
我也注意到,如果我有一个图像作为div内容,我没有得到这个问题,但我很想得到它与文本内容的div工作。有什么建议么?
下面的代码:
CSS(供应商前缀去除,以缩短代码,但问题是在所有现代浏览器中发生):
.shadow {border:1px solid #ccc;position:relative;width:300px;height:116px;background-color:#ededed;}
.shadow:before, .shadow:after {
bottom:13px;
content: "";
position: absolute;
z-index: -1;
-moz-transform: rotate(-11deg);
box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2);
height: 50px;
max-width: 50%;
width: 50%;
left:3px;
}
.shadow:after {
-moz-transform: rotate(11deg);
left: auto;
right: 2px;
}
.rotate{
-moz-transform: rotate(4deg);
}
HTML:
<div class="shadow">this is the first div</div> <!-- this one is ok -->
<div class="shadow rotate">this is the second div</div> <!-- this has the issue -->
<div class="shadow rotate"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div> <!-- this one is ok -->
而这里的一个jsfiddle: http://jsfiddle.net/U8qY3/5/
就是这样!你们很快*。它也适用于其他现代浏览器。 – caitriona
ps。我可以没有信誉的巧妙阴影效果。我发现它'在互联网上'。 – caitriona
这是一个很好的效果。你们俩都做得很好:) – Harry