Я пытаюсь добиться эффекта внутренней тени на простой коробке, что-то вроде: 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 тоже;)