css - ラッパーの両側にシャドウを適用する最良の方法

Question

これは非常に典型的なデザインだと思います。全画面の背景画像と、白い背景を持つコンテンツの中央に配置されたラッパーがあります。この白いラッパーの左右の端には、数ピクセル幅のきちんとした影があります。このサイトに似ています。

これを達成するための最良の方法は何ですか？背景画像（もしそうなら、何をどのように？）または境界線、何か他のもの？どんな助けでも感謝します。

編集:これを IE7 でサポートする必要があります。

Answer 1

これはCSS3box-shadowプロパティで行うことができます。

#wrapper {
   box-shadow: 0 0 10px #000;
   border:1px solid #000;
}

最新のブラウザはすべてこの機能をサポートしていますが、IE <9をサポートする必要がある場合は、画像またはPIEなどの外部ライブラリを使用する必要があります。

ブラウザの互換性に関する詳細情報：http：//caniuse.com/#search=box-shadow

Answer 2

IE7 までサポートするには、画像を使用することをお勧めします。画像は body タグの上/中央に配置され、Y 軸で繰り返されます。画像自体は、高さが 1 ピクセルで、デザインに必要な幅になります。フォトショップが得意な人なら誰でも作成できます。