div要素の周囲にどのように影を付けることができますか？

私はdiv "箱"の周りに非常に素晴らしい影を持つ方法を探しています。div要素の周囲にどのように影を付けることができますか？

これはどのようにすべてのブラウザで行うことができますか？

私は研究を行っており、より強力なブラウザでしか動作しないシャドウの例が多くあることがわかりました。

何とか画像を使用する必要がありますか？どうすればこのことができますか？何か案は？

2011-06-26 John Doe

特別な要件ブラウザのバージョンをサポートする必要がありますか？ –

IE 6以上Safari、Firefox、およびI <3 Chromeのバージョン –

を経由して、それを使用します。そうしないと、このような何かを試すことができます。 CSS3 box shadowsがその1つです。 CSS3のボックスシャドウをサポートしていないブラウザにはCSS3PIEを使用することもできますが、最新のブラウザではCSS3のシャドウと似ていないことがわかります。それを超えて、Photoshopのようなもので作成したドロップシャドウを使用して、別のdivとdivの後ろにバックグラウンドイメージを置き、ポジションを使って "top" divをオフセットして影が現れるようにすることができます。

出典

2011-06-26 00:34:23 kinakuta

CSS3PIE ftw。 +1 –

IE7などの古いブラウザをサポートしたい場合は、画像を使用する必要があります。

div.shadow { 
    -moz-box-shadow: 3px 3px 5px #777; 
    -webkit-box-shadow: 3px 3px 5px #777; 
    box-shadow: 3px 3px 5px #777; 
}

そしてもちろん、いくつかのオプションがあります<div class="shadow">…</div>

出典

2011-06-26 00:33:45 Dude

div要素の周囲にどのように影を付けることができますか？

答えて

関連する問題