1

現在のプロジェクトで次の効果​​を作成しようとしています。

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 を使用しますが、効果が壊れます。

私の質問が漠然としていることはわかっていますが、すべてを試してみましたが、問題がどこにあるのかわかりません..私の古いプロジェクトでこれを再現できました..

経験豊富な人から、私に力を与えてくれるちょっとしたヒント/アイデアを探しているだけなので、挑戦し続けることができます;}

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 に答える