イメージにエンボス加工されたエフェクトを作成しようとしています（ポラロイドのように）。そのため、写真の上端と左端にボックスシャドウが挿入されているはずです。しかし、それは動作していません...これはブラウザの問題です：BoxShadow：imgタグに埋め込みます
私は何をしたいかを示すためにjsfiddle http://jsfiddle.net/PEgBv/25/を作成しました。
私は2番目のdivボックスのように好きです（動作している場所）。しかし、画像上では、影はinset属性なしでのみ表示されます。 chrome14での作業
Linux上
CSS3のはめ込み影が画像上では動作しませんが、回避策があるが、ここでは
チェック：http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/
回避策はありませんmax-width: 100%;とheight: auto;の画像は、流体設計でよく使用され、画像が元の幅に達するまで自動的に拡大縮小されます。周囲を<a>（または任意の要素）を展開して表示を追加する必要があるすべてのコンテンツ（画像）をカバーするようにするには：inline-block;そうでなければ、影が期待通りに表示されません。
したがって、提案された回避策のスタイルに加えて、display: inline-block;をクラス.img-shadowに追加する必要があります。
イメージをバックグラウンドで使用すると機能します。したがって、imgタグを使用する代わりに、CSSファイルまたはスタイル属性のいずれかにbackground-image: url(source.jpg);を使用してください。ボックス影は背景画像の上にレンダリングされます。
ie9、ff6、chrome14、safari ...とwin7で試してみました。 – itshorty
私はそれをブラウザの問題と呼ぶかどうか分かりません。画像は影の上にレンダリングされているだけなので、表示されません。透明なイメージを使用するかどうかを伝えることができます（http://jsfiddle.net/LJcWE/） – OverZealous
例を詳しく見てみると、 'foo'というテキストも上に表示されます。 – OverZealous