CSS3 тень на верхней части детей

Ответ 1

Не может быть сделано непосредственно из 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);
}

.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>

Ответ 2

Чтобы избежать использования дополнительного элемента, вы можете использовать псевдоэлементы 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 работает некорректно на некоторых мобильных устройствах в отношении сенсорной прокрутки (щелчок/запись работает хорошо). Из-за этого я закончил тем, что не использовал вставные тени.

Ответ 3

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

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

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

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

Ответ 4

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

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