Использование CSS3 box-shadow для обрезанной тени на полпути

Question

Чего я хочу добиться, так это тени «наполовину», использующей CSS3 вместо изображения.

Ниже приведен слегка увеличенный пример того, чего я пытаюсь достичь:

Здесь задействованы три элемента, как показано ниже (уменьшено):

До сих пор я пытался разместить box-shadow на элементе A, а затем толкнуть более высокий z-index на элементе C, чтобы тень была видна только над элементом B, но не смогла повторить половина пути отрезана.

Кто-нибудь пытался достичь этого раньше, или результат всегда будет таким же «счастливым», как я думаю, будет?

Answer 1

Я только что столкнулся с той же проблемой и исправил ее следующим образом:

• Дайте C div больше z-index
• Сделайте так, чтобы это перекрывало (покрывало / переходило) A деление для 5px (или что бы то ни было количество пикселей в тенях).

Если вы сделаете это с тем же цветом, вы отлично спрячете тень, и вы получите свою половинную тень.

Answer 2

Убедитесь, что вы устанавливаете позицию для элементов, к которым вы применяете z-индекс:

http://jsfiddle.net/Vxz9f/