1

我正在尝试在我当前的项目中创建以下效果：

http://jsfiddle.net/pns2050/7TYTc/2/

但是当我尝试将它添加到我的网站时，两个底角会失去那个角度效果。

我的网站由一个 Masterpage 组成，它基本上在中间创建一个表格以供添加内容..

<div class="clearboth"></div>
<div id="pageWrap">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div><!--/Page Wrap-->

与 CSS

#pageWrap
{
width:950px;
height:700px;
margin:-30px auto -20px auto;
box-shadow: -1px -5px 20px 5px #80b840;
background-color:white;
position:relative;   
}

所以我添加了我的 default.aspx

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" 
 Runat="Server"> 
  <div class="box effect2">
    <h3>Effect 2</h3>
  </div>
</asp:Content>

使用 jsfiddle 中显示的 CSS，但效果中断..

我知道我的问题含糊不清，但我尝试了一切，但我看不出问题出在哪里……我可以在我的一些旧项目中重新创建它……

我只是想从有经验的人那里寻找一点提示/想法来给我力量，这样我就可以继续尝试；}

4

1 回答 1

1

这是因为z-index: -1;设置在伪元素上，而#pageWrap有z-index:0（默认）并且background-color:white;覆盖了阴影。

你可以解决它添加：

#pageWrap {
z-index:-2;
/* etc */

或删除白色背景。

于 2012-10-30T18:26:36.037 回答