使用CSS3 box-shadow創建中途截斷陰影

Question

我期望實現的是使用CSS3替換圖片的「半途」陰影。

下面是我想要達到一個稍微放大例如：

這裏涉及到三個要素，顯示如下（按比例縮小）：

到目前爲止，我已經試過在元素A上放置一個box-shadow，然後在元素C上推一個更高的z-index，這樣陰影僅在元素B上可見，但無法複製中途切斷。

有沒有人試圖在此之前做到這一點，或者結果總是會像我想的那樣是'hacky'？

Answer 1

確保您設置在你申請的z-index的元素的位置：

http://jsfiddle.net/Vxz9f/

Answer 2

我只是遇到同樣的問題，固定它的方式如下：

• 給這個C的div更高z-index
• 讓它不重複（套/走在上方）A DIV爲5px（或任何你 影子px金額是）。

如果你用相同的顏色來做，你會完美地隱藏陰影，你會得到你的半途陰影。