Можно ли «запретить» теням накладываться друг на друга?

Question

[KononovD]

Здравствуйте!
Есть прямоугольник1. У него есть дочерний элемент, назовем его - прямоугольник2. По наведению на прямоугольник1 у обоих прямоугольников появляется полупрозрачная тень. Прямоугольник2 - абсолютно спозиционирован и частично находится вне родителя. В 2х местах тени этих элементов пересекаются и складываются ( появляются явные темные пятна ).
Есть ли способ этого избежать?
Спасибо

Answer 1

[NaN]

Нет, разве что убрать тень у кого-либо из элементов или сделать сдвиг, но тогда тень, конечно, будет уже выглядеть иначе

Comments

[KononovD]

вот такая ситуация
"прямоугольник1" - карточка товара, "прямоугольник2" выделен красным. Синим выделил наложение теней..
Вроде и не большая беда, но глаз режет

[NaN]

KononovD, это просто не возможно исправить, это вполне нормальное и логичное поведение.

[fallus]

Можно сделать карточке товара overflow-x: hidden;
Тогда всё что за горизонтальными границами карточки товара обрежется, включая тени.
Но это нормально будет выглядеть только в том случае, если два блока с тенями всегда одной ширины.

[Rustam Bainazarov]

KononovD, нет. Вам нужно тень делать на отдельный блок с абсолютным позиционированием и с помощью JS считать высоту.

[KononovD]

Рустам Байназаров, можно подробнее?

отдельный блок с абсолютным позиционированием

может значить почти все что угодно)