Почему фоновый эффект ломает тень?

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

где зеленый квадрат - это содержимое внутри другого окна.

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

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

Любая идея?

UPDATE

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

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

ОБНОВЛЕНИЕ 2

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

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

Update3

Кто-то открыл ошибку на mozilla и получил этот ответ, который очистил "проблему":

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

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

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

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

UPDATE4

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

Ответы

Ответ 1

Так как у меня тоже есть эта проблема, и я тоже не вижу, чтобы это поведение было нормальным, я подал отчет об ошибке применил ваш пример 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%;
}

Ответ 2

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

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

Live Demo

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>

Ответ 3

проблема слоистая перекрывается, вы можете избежать ее использования поля или заполнения. Пытаться 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;
}

Ответ 4

Проверьте эту скрипту: 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;
}

Ответ 5

Просто убедитесь, что свойство дочернего фона указано с 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);
}

Ответ 6

Это отлично работает для меня без каких-либо дополнительных элементов 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;

}