Как иметь два элемента может коробка тени

Question

Так что я нахожусь в сложной ситуации: у меня есть внешний div оболочки, которая содержит внутреннюю div и ul вроде так:

<div id="wrapper"> 
    <div id="box"></div> 
    <ul id="list">...</ul> 
</div> 

#list должен быть абсолютно позиционируется справа под #box, но не перемещает его и другие элементы вокруг страницы по мере ее появления и исчезает.

Поскольку он расположен абсолютно, если я добавляю границу около #wrapper, он обходит только #box. box-shadow, конечно, действует одинаково. Проблема в том, что мне нужна тень, которая легко обходит оба элемента.

Три решения я столкнулся при поиске Google/StackOverflow являются:

1. Дайте оба элемента свою собственную тень, а затем использовать -webkit-clip-path, чтобы избавиться от верхней тени на #list, делая вид как одна тень, идущая вокруг группы. Пока это работает, часть, где встречаются тени, имеет странный эффект, создающий клип. Таким образом, этот метод работает, но он выглядит не очень хорошо. Link to answer describing solution.

2. Используйте разброс, равный отрицательному значению размытия, а затем используйте 3 тени, по одному для каждой стороны #list. Хорошо в теории, но на практике тени по сторонам теперь не идут по всей длине. Link to answer describing solution. Вот мой jsfiddle.

3. Использовать псевдоэлемент :before или :after для перекрытия перекрывающейся тени. Это очень хорошо подходит для аналогичных ящиков, но у моих ul и div есть контент в них, который не может позволить себе быть покрытым! Link to answer describing solution

я остался в немного джема, так как я действительно хотел бы тень вокруг #box и #list вместе, но не могу показаться, чтобы найти решение, которое работает для моего конкретного случая. Любые предложения были бы чрезвычайно полезными!

Примечание: Я на самом деле с помощью рамки Electron, поэтому решение необходимо работать на Chrome, но только должен работать на Chrome!

Answer 1

Вы можете использовать CSS-фильтр:

#box{ 
    -webkit-filter: drop-shadow(0 0 5px black) 
    filter: drop-shadow(0 0 5px black) 
}