Divの1つに影を配置しようとしていますが、表示されません。シャドウを実装しようとしている1つのdivは次のとおりです。
#intro {
padding: 0px;
margin: 0px auto;
width: 100%;
float:inherit;
overflow: hidden;
height: 800px;
position:inherit;
background-color: #00b3e1;;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
URLは次のとおりです。 http://rachelchaikof.com/awareness/
影が見えない理由は、次のdiv(#one)がその直下にあり、影が#oneの下にレンダリングされているためです。 #oneから背景画像を削除すると、影が表示されます。
これを#introのCSSに追加して、影を表示します。
position: relative;
z-index: 10;
他のテキスト領域に影を表示したい場合は、最上位の要素(#intro)の値を最大にして、それらのz-index値も調整する必要があります。
正しい解決策については、以下のChris Herbertの回答をご覧ください
前の答え:
chrome、Moz、Safariのサポート:
-moz-box-shadow:0 0 8px 0 black; -webkit-box-shadow:0 0 8px 0 black; box-shadow:0 0 8px 0 black;
つまり、サポートははるかに複雑です。
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color='#33000000');
私が今日持っていた別のシナリオ。 divを基準にして位置を設定しても、ボックスシャドウは表示されませんでした。どうやら、このdivの隣にボックスシャドウのあるコンテンツはありませんでした。
コンテンツが追加されると、ボックスの影が現れました。