Bóng hộp CSS3 trên đầu trang của trẻ em

Question

Làm thế nào để có được một bóng hộp CSS3 inset để hiển thị trên phần tử con của nó?

Vấn đề:

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

không thể được thực hiện trực tiếp từ css .. (nó không được bóng nếu nó đi trên các phần tử chồng chéo)

bạn sẽ cần phải làm lại html của bạn một chút bằng cách thêm một div (hoặc sử dụng một yếu tố giả theo đề nghị của miguelcobain's câu trả lời) để che phủ cái bóng và CSS của bạn để làm cho div mới có cái bóng ..

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

Answer 2

tôi khuyên bạn nên sử dụng box-shadow cùng với -moz-box-shadow và -webkit-box-shadow.

Tương lai (và Opera 10.5;)) tương thích.

Answer 3

Thay đổi background-color của bất kỳ trẻ em cũng được RGBA (điều này chỉ được thiết lập trong trình duyệt mà hiểu nó mà, thuận tiện, là bất kỳ trình duyệt có thể xử lý bóng):

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

Lưu ý rằng hai màu (#EEE, RGBA(0, 0, 0, .066)) giống nhau miễn là nền phía sau màu trắng.

Demo từ người dường như được bỏ phiếu xuống này không có lý do: http://jsfiddle.net/6NrkR/

Answer 4

Để tránh việc sử dụng các yếu tố bổ sung, bạn có thể sử dụng css pseudo-yếu tố. Hãy thử điều này demo.

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

Về cơ bản, css này tạo yếu tố bổ sung cho bạn. Lưu ý rằng pointer-events:none để cho phép các sự kiện nhấp qua đi qua phần tử này.

Hãy nhớ rằng pointer-events:none không hoạt động tốt trên một số thiết bị di động liên quan đến việc cuộn cảm ứng (nhấp/ghi hoạt động tốt). Cuối cùng tôi không sử dụng bóng tối inset vì điều này.