Вопросы Теги

тень поля сверху детей

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

Проблема:

enter image description here

HTML:


    
User 1:Test

    
User 2:Test

    
User 1:Test

    
User 2:Test

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;
}

37
задан TylerH 8 February 2019 в 17:12
поделиться

2 ответа

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

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

 #chatroom {border: 1px solid #CCC; высота: 135 пикселей; размер шрифта: 0,75em; высота строки: 1.2em; перелив: авто; положение: относительное; } .shadow {позиция: абсолютная; слева: 0px; верх: 0px; вправо: 0 пикселей; внизу: 0px; -moz-box-shadow: вставка 0 0px 4px rgba (0, 0, 0, .55); -webkit-box-shadow: вставка 0 0px 4px rgba (0, 0, 0, .55); box-shadow: вставка 0 0px 4px rgba (0, 0, 0, .55); } .chatmessage {padding: 4px 2px; } .chatmessage b {margin-right: 2px; } .chatmessage: nth-child (2n) {background: #EEE; } 
 
 
  Пользователь 1:  Тест 
 
  Пользователь 2: < / b> Тест 
 
  Пользователь 1:  Тест 
 
  Пользователь 2:  Тест
20
ответ дан 27 November 2019 в 04:45
поделиться

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

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

0
ответ дан 7 July 2019 в 15:26
поделиться