asp.net - 带有 :before and :after [CSS3] 的框阴影

Question

我正在尝试在我当前的元素中创建以下效果:

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

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

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

<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 */

或删除白色背景。