заставить CSS вставку box-shadow появляться поверх внутренних фонов

Question

Я хочу, чтобы CSS-вставка box-shadow появлялась поверх элементов внутри контейнера вместе с box-shadow, в частности цветами фона дочерних элементов.

Демо: http://jsfiddle.net/Q8n77/

<div class="parent">
    foo
    <div class="content">bar</div>
</div>

<style>
.parent {
    box-shadow : inset 0 0 5px 0 black;
}

.content {
    background : #EEE;
}
</style>

Есть идеи?С HTML можно делать все, что угодно, но нужно иметь возможность переходить по ссылкам, поэтому 100% ширины / высоты DIV больше всего на свете.

Answer 1

Если все, что вам нужно, это чтобы теневые вставки отображались через цвета фона, вы можете использовать прозрачные rgba (или hsla) цвета вместо шестнадцатеричных кодов;

.parent {
    box-shadow: inset 0 0 5px 0 black;
}

.content {
    background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}

Демо на http://jsfiddle.net/Q8n77/7/

Answer 2

Не у всех есть возможность изменить структуру HTML. Если вы можете получить доступ только к CSS, вы можете попробовать следующее из этого поста: https://stackoverflow.com/a/13188894/491044

В качестве альтернативы вы можете использовать псевдоэлемент:

HTML:

<div>
    a
</div>​

CSS:

div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}​

Answer 3

Одна возможность - играть с padding.

.parent {
    box-shadow : inset 0 0 5px 0 black; padding:.23em;
}

http://jsfiddle.net/jasongennaro/Q8n77/6/

Answer 4

вы можете попытаться расположить оверлейный элемент div поверх вашего родителя с помощью позиции: absolute; и дать эту тень (непроверенная теория) примерно так:

HTML

<div class="parent">
    <div class="overlay"></div>
    foo
    <div class="content">bar</div>
</div>

CSS

.parent {  
    position: relative;
}

.content {
    background : #EEE;
}

.parent .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow : inset 0 0 5px 0 black;
}

Answer 5

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

Я в основном добавляю :: before или другой элемент с тенью в родительском элементе, но смещаю его так, что только теньчасть показывает.Также я даю родителю переполнение: скрытое.Таким образом, контент должен оставаться интерактивным.:)

Пробег может варьироваться в зависимости от точной разметки курса.Но подумал, что я должен добавить это здесь.

codepen: http://codepen.io/mephysto/pen/bNPVVr

.parent {
  background:#FFF;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
}
.parent::before{
  content:"";
  display:block;
  width:100%;
  height:25px;
  margin-top:-25px;
  box-shadow : 0px 0px 25px 0px rgba(0,0,0,0.9);
}

Answer 6

Вы можете установить box-shadow как для родителя, так и для ребенка.

Answer 7

Если вам нужна только тень сверху, это сделает это:

.element 
{
    box-shadow:inset 0px 3px 3px #BBB;
}