CSS3のボックスシャドウを半分のシャドーシャドウに使用する

Question

私が達成しようとしているのは、イメージを置き換える際にCSS3を使った「半分の」シャドウです。下に表示されるよう、ここで関係する三つの要素は、（縮小）、があります

：以下

は少しズームし、私が達成しようとしているものの一例である

これまでのところ、Aにbox-shadowを配置し、次にz-indexを要素Cにプッシュすると、シャドーは要素B上にのみ表示されますが、途中切断は複製できませんでした。

これまでに誰かがこれを達成しようとしたことがありますか、それともいつも「ハッキー」になると思いますか？

Answer 1

あなたは、あなたがzインデックスを適用している要素の位置を設定していることを確認します：私はちょうど同じ問題に直面し、それを次のように固定

http://jsfiddle.net/Vxz9f/

Answer 2

：

を
• はCが、それは（カバー/オーバー行く）重複してくださいA5pxのためのdiv（またはものは何でもあなたのの高いz-index
• をDIV与えますシャドーpx金額です）。

同じ色であれば、影を完全に隠すことができ、半分の影を得ることができます。