Плавное смешивание тени

Мне нужно применить тень к всеобъемлющей границе, однако до сих пор я создавал тень с помощью CSS, и, поскольку всеобъемлющая граница образована двумя прямоугольниками, тень перекрывается.

Мое решение состоит в том, чтобы скрыть перекрывающуюся часть изображением, которое выглядит как бесшовное смешение, однако я не уверен, как должны выглядеть тени, когда они встречаются таким образом. Пожалуйста, обратите внимание на область синего круга.

Как бы эта часть смешалась, если бы это был естественный объект? С художественной точки зрения?

Как мне понять, как будет выглядеть естественная смесь теней для такого примера?

Для этого я могу использовать Adobe Photoshop или GIMP.

Мне нравится идея перепроектировать структуру, может быть, два ящика сбоку, соединенные третьим ящиком сверху... Посмотрим.. Спасибо!

Ответы (2)

Вот мое решение. Я думаю, что это единственный способ сделать это в CSS и получить чистые швы между тенями. Я использовал синие прозрачные блоки, потому что проблема, с которой вы столкнулись бы с методом внутренней тени, заключается в том, что угловые швы/кривизна тени не совпали бы там, где встречаются зеленый и черный блоки.

введите описание изображения здесь

Должен был упомянуть, что вам нужно будет использовать z-index для размещения всех div в правильном порядке.
Спасибо, Джон, это требует больше работы, но я верю, что это действительно сработает! Спасибо!

Естественная тень по существу будет продолжением оранжевой границы.

Это быстрый макет, который нуждается в дальнейшей доработке:

тень

С точки зрения CSS вам нужно будет расширить выступающий блок, чтобы покрыть тень на нижнем элементе, а затем удалить встроенную тень на нижнем краю выступа.

Спасибо за быстрый ответ. Хорошо, если мы расширим выступающий блок с его тенью сбоку, не будет ли тень с обеих сторон по-прежнему демонстрировать резкий контраст с тенью нижнего элемента? Так как тень идет от темного к светлому вбок, а нижний элемент идет сверху вниз...
Ага. Не уверен, что вы можете осуществить это с помощью CSS3. Но я не эксперт по тени CSS3.
поместите туда еще один div и используйте его, чтобы замаскировать тени. Просто установите z-индекс и поместите его ниже поля. Я не думаю, что это даст вам чистый шов, где тень встречается в углах.
Плавное смешивание тени
СпросиСетьПолитика конфиденциальности1y, 0v