Как сделать так, чтобы два элемента разделяли тень блока

Итак, у меня сложная ситуация: у меня есть внешняя 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, сделав ее похожей на одну тень, огибающую группу. Хотя это работает, часть, где встречаются тени, имеет вид странный эффект резкости. Итак, этот метод работает, но выглядит не очень хорошо. Ссылка на ответ с описанием решения.

  2. Используйте распространение, равное отрицательному значению размытия, а затем используйте 3 тени, по одной для каждой стороны #list. Теоретически неплохо, но на практике тени по бокам теперь не проходят по всей длина. Ссылка на ответ с описанием решения. Вот jsfiddle, в котором я пробовал это.

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

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

Примечание. На самом деле я использую платформу Electron, поэтому решение должно работать в Chrome, но оно только должно работать в Chrome!


html css shadow box-shadow
person rcplusplus    schedule 12.07.2016    source источник
comment
Это отличный ответ с примером   -  person James Brown    schedule 13.07.2016
comment
@JamesBrown Проблема в том, что мне нужно #list быть абсолютно уверенным. Если бы его не было, когда он снова появился бы, он бы все толкнул. Я хочу отображаться как всплывающее окно над всем остальным, не меняя поток. К сожалению, это не позволяет #wrapper фактически обернуть его, что делает это нетривиальным, но я надеюсь, что есть какой-нибудь потрясающий CSS-хакер, который какой-то гуру подарит, что поможет :)   -  person rcplusplus    schedule 13.07.2016
comment
Это тот случай, когда изображение действительно может оказаться полезным. Это звучит очень возможно - так что, может быть, я что-то упускаю. Все зависит от элементов макета - цвета тени, вещей под ними и т. Д. - и от того, как они переходят.   -  person sheriffderek    schedule 13.07.2016

Ответы (1)


arrow_upward
6
arrow_downward

Вы можете использовать css-filter:

#box {
  filter: drop-shadow(0 0 5px black)
}
person Yukulélé    schedule 12.07.2016
comment
В MDN сказано, что drop-shadow в основном похож на box-shadow, но с аппаратным ускорением. Синтаксис тоже кажется похожим, как мне его использовать? - person rcplusplus; 13.07.2016
comment
У меня работал с элементом и его псевдоэлементом: after. Спасибо - person Matt; 11.11.2019
comment
Не знаю почему, но это сработало отлично! Спасибо, сэр - person Zankar; 20.01.2020