CSSは私がメインのdivボックスに影を置くためのボックスシャドウを使用しているウェブサイトを作成している

Question

のdivボックスのz-indexが

box-shadow: 0 0 10px rgba(0,0,0,0.2); 

問題は影が表示されます場所を指定することができないということですその位置をオフセットすること以外は

これは、2つのシャドウを同時にボックスの上部または下部に影をもたずにボックスの両側に置くことができないことを意味します。 （少なくとも私の計算にはない）

私は "main-div"ボックスの下に別のボックス "overlay-div"を配置し、それに白い背景を付け、それを影の上に重ねることができると思った私が隠したいと思っている...

私の問題は、「overlay-div」は隠したいボックスをオーバーレイするだけでなく、次のdivをオーバーレイして内容の一部をカバーすることです。

オーバーレイを作成する方法はありますか、特定のボックスをオーバーレイしますか他にはありませんか？

私はz-indexを試しましたが、動作しません。私は本当に＃content-footer divの下部に影がなく、白い背景に滑らかにしたいと思っています。ここで

私のコードです：

<style> 
#content-footer { 
float: left; 
width: 980px; 
height: 250px; 
padding: 30px 30px 0; 
background: #EBEBEB; 
background: -moz-linear-gradient(#EBEBEB 20%, white 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EBEBEB), color-stop(100%, white)); 
box-shadow: 0 0 10px rgba(0,0,0,0.2); 
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); 
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); 
} 
#sitemap { 
background-color: white; 
height: 300px; 
float: left; 
width: 920px; 
margin: -130px 30px 0 30px; 
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 
-moz-border-radius-bottomleft: 5px; 
-moz-border-radius-bottomright: 5px; 
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; 
box-shadow: 0 5px 5px rgba(0,0,0,0.2); 
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2); 
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2); 
} 
</style> 

<div id="content-footer"> 
    ... content ... 
</div> 

<div id="sitemap"> 
    ... sitemap ... 
</div> 

これは私が達成しようとしているものです：

（http://dl.dropbox.com/u/5456769/gradeint-box-shadow.png）

Answer 1

私が正しくあなたのポストを理解している場合は、左、右、上辺に影を持たせたい場合は、#sitemapとではなく、を下側に配置します。

この場合、here is a jsbin solutionです。 z-indexはそれらのみに適用さfixed、relative、またはabsoluteポジショニングを持つ要素で動作するので、z-indexと

あなたの努力が働いていませんでした。

重要な部分：

• #sitemapposition:relative
• #content-footerを有する#sitemap内にネストとposition:absoluteを有し、height:280px、そしてbottom: -280px
• #sitemapと#content-footerは

0同じ幅を有しています

カスタマイズされた超コンパチブルグラデーションの設定にはthis toolを使用することをおすすめします。

Answer 2

試してください：after：またはbefore疑似セレクタ。 グラデーションは、一方の端に透明な背景を、もう一方の端に#fffのグラデーションを使用することもできます。そのため、非常に簡単な修正はあります

#content-footer { 
float: left; 
width: 980px; 
height: 250px; 
padding: 30px 30px 0; 
background: #EBEBEB; 
background: -moz-linear-gradient(#EBEBEB 20%, white 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EBEBEB), color-stop(100%, white)); 
box-shadow: 0 0 10px rgba(0,0,0,0.2); 
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); 
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); 
position:relative; 
} 

#content-footer:after { 
position: absolute; 
content: ""; 
background-color: white; 
height: 300px; 
width: 920px; 
margin: -130px 30px 0 30px; 
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 
-moz-border-radius-bottomleft: 5px; 
-moz-border-radius-bottomright: 5px; 
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; 
box-shadow: 0 5px 5px rgba(0,0,0,0.2); 
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2); 
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2); 
} 

Answer 3

は、 はちょうどそれと同じくらい簡単な

#content-footer-container { 
    overflow:hidden; 
    float: left; 
    width: 100%; 
    height: 280px; //+30px considering padding 
} 

としてオーバーフロー隠しと同じ高さのdiv内のコンテンツ・フッターを配置します。 幅がフッターdivより大きいため、上下の影が切り取られ、影の側が目に見えます。