коробка-тень сверху детей

Question

Как получить CSS3 box-shadow для рендеринга поверх дочерних элементов?

Проблема:

HTML:

<div id="chatroom">
    <div class="chatmessage"><b>User 1:</b>Test</div>
    <div class="chatmessage"><b>User 2:</b>Test</div>
    <div class="chatmessage"><b>User 1:</b>Test</div>
    <div class="chatmessage"><b>User 2:</b>Test</div>
</div>

CSS:

#chatroom{
    border: 1px solid #CCC;
    height: 135px;
    font-size: 0.75em;
    line-height: 1.2em;
    overflow: auto;
    -moz-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);
    -webkit-box-shadow: inset 0 0px 4px rgba(0,0,0,.55);
}
.chatmessage{
    padding: 4px 2px;
}
.chatmessage b{
    margin-right: 2px;
}
.chatmessage:nth-child(2n) {
    background: #EEE;
}

Answer 1

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

#chatroom {
    position: relative;
}

#chatroom:before {
    content: "";

    /* Expand element */
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;

    -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.55);
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.55);
    box-shadow: inset 0 0 8px rgba(0,0,0,.55);

    /* Disable click events */
    pointer-events: none;
}

В основном этот CSS создает для вас этот дополнительный элемент. Обратите внимание на pointer-events:none, чтобы позволить событиям щелчка проходить через этот элемент.

Имейте в виду, что pointer-events:none не работает на некоторых мобильных устройствах с сенсорной прокруткой (хорошо работает нажатие / запись). Из-за этого я вообще не использовал вставные тени.

Answer 2

нельзя сделать напрямую из css .. ( это не тень, если она идет выше перекрывающихся элементов )

вам нужно будет немного переделать свой html, добавив div (или использовать псевдоэлемент согласно предложению ответа miguelcobain), чтобы наложить тень и ваш CSS, чтобы новый div имел тень. .

#chatroom {
  border: 1px solid #CCC;
  height: 135px;
  font-size: 0.75em;
  line-height: 1.2em;
  overflow: auto;
  position: relative;
}

.shadow {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  -moz-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);
  -webkit-box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);
  box-shadow: inset 0 0px 4px rgba(0, 0, 0, .55);
}

.chatmessage {
  padding: 4px 2px;
}

.chatmessage b {
  margin-right: 2px;
}

.chatmessage:nth-child(2n) {
  background: #EEE;
}

<div id="chatroom">
  <div class="chatmessage"><b>User 1:</b>Test</div>
  <div class="chatmessage"><b>User 2:</b>Test</div>
  <div class="chatmessage"><b>User 1:</b>Test</div>
  <div class="chatmessage"><b>User 2:</b>Test</div>
  <div class="shadow"></div>
</div>

Answer 3

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

.chatmessage:nth-child(2n) {
    background : #EEE;
    background : RGBA(0, 0, 0, .066);
}

Обратите внимание, что два цвета (#EEE, RGBA( 0, 0, 0, .066)) идентичны, если фон позади них белый.

Демонстрация, так как кажется, что люди голосуют без всякой причины: http://jsfiddle.net/6NrkR/

Answer 4

Я рекомендую использовать box-shadow вместе с -moz-box-shadow и -webkit-box-shadow.

Это совместимо с будущим (и Opera 10.5;)).