Question

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

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

但是当我尝试将它添加到我的网站时，2个底角失去了角度效果..

我的网站由一个主页面组成，该网页基本上在中间创建了一个表格，用于添加内容..

<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，但效果会中断..

我知道我的问题很模糊，但我尝试了一切，我无法看到问题出在哪里。我可以在我的一些旧项目中重新创建这个......

我只是想从有经验的人那里寻找一点暗示/想法给我力量，这样我就可以继续努力;}

Answer 1

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

你可以解决它：

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

或删除白色背景。

box-shadow with：before和：after [CSS3]

1 个答案: