Достижение эффекта утопленного контейнера с помощью CSS3 Box-shadow

Question

Мой контент обернут в div, который имеет вставку box-shadow, чтобы попытаться создать эффект утечки контента на страницу. У меня проблема в том, что любые элементы содержимого, которые находятся достаточно близко к краю, чтобы перекрывать тень, скрывают тень, а не накладывают тень поверх них. http://jsfiddle.net/wheresrhys/Y8tXW/

Есть ли способ, кроме определения теней для каждого элемента, достичь желаемого эффекта?

Answer 1

Вы можете использовать что-то вроде: http://jsfiddle.net/Y8tXW/5/

То есть добавить внутреннее поле со стилем:

.overlay{
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    box-shadow: inset 2px 2px 4px 5px rgba(0,0,0,0.3);
    pointer-events: none; /* Makes sure the inner contents can still have mouse interaction*/
}

Предполагая, что вы хотите, чтобы другие элементы были покрыты тенью.Для браузеров, слишком старых для поддержки box-shadow, установите display:none на оверлей.В качестве альтернативы, используйте псевдокласс :before, чтобы добавить оверлей только тогда, когда это необходимо.

Answer 2

Вместо добавления позиции: абсолютной и отключения содержимого внутри div, а также наложения эффекта тени на содержимое, вы можете просто добавить отступы к вашему .shadow div, чтобы содержимое внутри не перекрывало эффект тени.

Проверьте это http://jsfiddle.net/Y8tXW/12/

Answer 3

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