Почему фон нарушает эффект вставки тени?

Question

Я пытаюсь добиться эффекта внутренней тени на простой коробке, что-то вроде: альтернативный текст http://gotinsane.com/test.jpg

где зеленое поле - это содержимое внутри другого поля.

Моя проблема в том, что если я добавлю фону содержимого какой-либо фон, эффект тени блока внешнего поля исчезнет!

Вот пример моей проблемы (с разметкой и css), я установил высоту содержимого меньше, чтобы подтвердить проблему - по крайней мере, меня не волнует IE *, это всего лишь тест.

Есть идеи?

UPDATE

Содержимое внутри поля является своего рода слайдом, здесь пример (исходная проблема) . Ответ тридцатки делает свое дело, но заставляет меня немного взломать, изменив фон оболочки в зависимости от содержимого: * пример 1010 * (хитрость тридцати) .

Это может быть решением, но мне оно не очень нравится, и я до сих пор не понимаю, почему тень внешнего блока попадает за фон внутреннего блока (цвет, изображение)

ОБНОВЛЕНИЕ 2

Говоря об этой проблеме на другом форуме, я нашел другой способ : в основном, вместо использования box-shadow для оболочки, который будет действовать как маска, я использую box-shadow и border-radius непосредственно на содержание (.step элементов) Однако эффект «маски» - это именно то, чего я пытался достичь, так что это тоже не решение.

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

Update3

Кто-то открыл ошибку в mozilla и получил ответ, который прояснил «проблему»:

С http://www.w3.org/TR/css3-background/#the-box-shadow:

С точки зрения контекста стека и порядка рисования, внешние тени элемент рисуется непосредственно под фоном этого элемента, а внутренние тени элемента рисуются непосредственно над фоном этот элемент (ниже границ и изображения границы, если есть).

В частности, фоны children элемента будут нарисованы выше тень вставки (и на самом деле они рисуют над границами и фоном сам элемент).

Таким образом, рендеринг - это именно то, что требуется для спецификации.

UPDATE4

Фабио А. указал другое решение, с css3 pointer-events. Хорошо выглядит и работает на IE8;)

Answer 1

Так как у меня тоже есть эта проблема, и я тоже не вижу нормального поведения, я отправил сообщение об ошибке в mozilla

Я могу воспроизвести проблему в Google Chromeхотя тоже, поэтому мне интересно, действительно ли это ошибка.Но это может быть.

edit:

На самом деле это не ошибка, а способ работы.Итак, на основании этой информации я разобрал ваш пример jfiddle и придумал следующее решение:

Разметка теперь выглядит следующим образом:

<div id="box">
    <div id="wrapper">
        <div id="box_content">
            Content here
        </div>
        <div id="mask"></div>
    </div>
</div>

маска становится еще одним div, который наслоен поверх #box_content благодаря тому, что он абсолютно позиционирован.Это CSS:

#wrapper{
    position: relative;
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    margin: 10px;
}
#mask {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%;
    height: 100%;

    pointer-events: none; /* to make clicks pass through */

    box-shadow: 0 0 10px #000000 inset;
}
#box_content{
    background-color: #0ef83f;
    height: 100%;
}

Answer 2

Я немного запутался, что вы на самом деле после.Если это не совсем правильно, дайте мне знать:)

Это мое лучшее предположение.

Живая демоверсия

CSS:
(я добавил вправила префикса поставщика.)

#box {
    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;

    width: 280px;
    height: 280px;
    padding: 10px
}

#wrapper {
    background-color: #0ef83f;

    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: inset 0px 0px 18px #000;
    -moz-box-shadow: inset 0px 0px 18px #000;
    box-shadow: inset 0px 0px 18px #000;

    width: 240px;
    height: 240px;
    padding: 20px
}

HTML:

<div id="box">
    <div id="wrapper">
        Content here
    </div>
</div>

Answer 3

Это прекрасно работает для меня без каких-либо дополнительных элементов DOM (например, «обертка» и т. Д.):

div.img {
  display: inline-block;
  position: relative;
  width: 400px;
  height: 280px;
  background-image: url(/images/anyimage.png);
}

div.img:after {
  display: inline-block;
  width: 100%;
  height: 300px; //parent height +20px
  position: absolute;
  top: -10px;
  left: 0;
  box-shadow(inset -25px 0 25px -25px rgba(0,0,0,.2), inset 25px 0 25px -25px rgba(0,0,0,.2));
  content: ' ';
  pointer-events: none;

}

Answer 4

Просто убедитесь, что свойство дочернего фона задано с помощью rgba, , как в этой скрипке .

. Дайте родителю background-color, чтобы предотвратить просвечивание всего, что находится под ним.

ul {
    box-shadow : inset 0 0 10px 10px gray;
    background-color: white;
}

li:nth-child(even) {
    background : rgba(255,0,0,0.2);
}

Answer 5

Проверьте эту скрипку: http://jsfiddle.net/FEk3c/6/

#box{
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px #000000;
    width: 300px;
    height: 300px;
}
#body{
    margin: 0;
}

#wrapper{
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000000 inset;
    margin: 10px;
}
#box_content{
    background-color: #0ef83f;
    height: 100px;
}

Answer 6

проблема многоуровневая перекрывается, вы можете избежать этого, используя поля или отступы. Пытаться http://jsfiddle.net/pramendra/FEk3c/5/

#box{
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px #000000;
    width: 300px;
    height: 300px;
}
#body{
    margin: 0px;
}


#wrapper{
    display:inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000000 inset;
      box-shadow:inset 0 0 10px 0 #000000;
        margin: 10px;
}

#box_content{
    background-color: #f00;
    margin:5px;
}