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

Question

У меня есть элемент div с некоторыми дочерними элементами, и я пытаюсь применить вставку box-shadow, дочерние элементы, кажется, покрывают box-shadow, вот пример jfiddle: jsFiddle Demo

Если вы уберете background-color в классе optn, вы увидите там тень от вставки, поэтому мой код равен . Итак, вопрос в том, как мне сделать так, чтобы дочерние элементы появлялись под тенью-тенью?

Answer 1

Была такая же проблема, найдите половину решения (хорошо работает, если у вас нет прокрутки внутри).

Вы можете расположить фон в элементе под тенью, поместив его внутри псевдокласса: before или: after и установив его z-index: -1.Это сделает фоновую часть.

Но это создаст новую проблему: Для позиционирования: перед элементом вам нужно будет применить к элементу .optn «position :lative;»и если вы примените «позиция: относительная;»к нему он начнет показываться из-под закругленных углов в браузерах Webkit.

Если у вас нет прокрутки внутри, вы можете исправить это, округлив углы, если первый и последний элемент .optn бит, если выхотите прокрутить этот контент, тогда вы, к сожалению, не сможете.

В любом случае, есть пример: http://jsfiddle.net/qN99W/

Answer 2

http://jsfiddle.net/wdYpv/3/

Переместить цвет фона на родительский.

Answer 3

Если я правильно понимаю вашу цель, у вас уже есть ответ на ваш вопрос.;-) Удалите цвет фона из optn и добавьте его к optn-group.

Как вы уже обнаружили, если у вас есть другой цвет фона для optn при наведении илив активном состоянии он все еще находится над этой тенью.Простое и, возможно, ленивое решение - не изменять цвет фона для них, а использовать цвет текста и другие эффекты (например, смещение на 1 пиксель вниз).Или, если вам нужен радиус границы, но для этих особых случаев (при наведении, активная) вы можете жить без тени, просто установите границы радиуса соответствующим образом.

Кроме этого, не позволяйте миру промывать вам мозгидумать, что только потому, что у нас есть замечательные новые инструменты в CSS, которые вы больше не можете использовать изображения.То, что вы ДЕЙСТВИТЕЛЬНО хотите сделать, все еще может быть легче сделать с изображениями.

Посмотрите на эффект «розовых ножниц» на многочисленных веб-страницах, и он все еще выполняется с одним или несколькими прозрачными PNG, искусно размещенными.

Answer 4

Вы можете добавить отступы так: http://jsfiddle.net/jalbertbowdenii/wdYpv/2/