bóng hộp css trên ngăn chứa div bị cắt

Question

chỉnh sửa: câu hỏi tổng quát hơn: Tôi thích hộp đổ bóng trên div, tuy nhiên khi tôi đặt div trực tiếp bên dưới div hộp bóng, phần dưới cùng của bóng không che phủ trên đầu mặc dù rối tung với chỉ mục z. Vì vậy, nó có vẻ như bóng hộp không thể che phủ một div? Bất cứ ý tưởng sẽ là tuyệt vời!

câu hỏi gốc- Tôi đang sử dụng bản thiết kế cho bố cục. Điều này có nghĩa là có một .container của 950px mà sau đó chứa một #content.

Trong trường hợp này, #content sẽ lấp đầy toàn bộ vùng chứa cũng như 950px.

Tôi muốn có một bóng đổ trên #content, nhưng vấn đề là bóng sẽ bị cắt vì không còn khoảng trống để xem nó trong .container.

Giải pháp thay thế là giảm chiều rộng của #content nhưng điều đó làm rối loạn vị trí bố trí mà tôi đã có và trông có vẻ quá hẹp.

Có cách nào để lấy bóng hộp để loại bỏ vùng chứa mẹ và xuất hiện trên nó không? Đây không phải là bản thiết kế cụ thể mà tôi đoán, nhưng đó là ngữ cảnh. cảm ơn!

EDIT:

body .container { 
    margin: 0 auto; 
    overflow: hidden; 
    width: 950px; 
} 
body .container:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
#content { 
    display: inline; 
    float: left; 
    margin-right: 0; 
    width: 950px; 
    box-shadow: 0 0 4px black; 
    -moz-box-shadow: 0 0 4px black; 
} 

#content là trực tiếp trong .container. Nếu tôi đặt một bóng đổ trên #content bạn không thể nhìn thấy nó cho đến khi tôi thu hẹp chiều rộng, mà messes với các yếu tố bên trong.

Answer 1

Tôi sẽ thêm một số phần đệm vào phần tử .container và đảm bảo rằng #content vẫn ở độ rộng bạn cần.

Answer 2

Bạn có thể làm cho .container rộng hơn (960 hoàn toàn chấp nhận được với chiều rộng cố định) và giữ #content ở giữa bên trong .container. Điều đó có gây rối cho bạn không?

Answer 3

Bạn không cần overflow: hidden trên .container, vì bạn đã sử dụng sửa chữa rõ ràng trên đó. Vì vậy, bạn chỉ có thể vứt nó đi: http://jsfiddle.net/kizu/gDXLf/

Answer 4

Tất cả phụ thuộc vào những gì bạn đang cố gắng đạt được.

Tôi gặp khó khăn với nhóm danh sách chặn nội tuyến. Cái bóng bên bị cắt đứt bởi các mục trong danh sách bên cạnh nó khi di chuột

Một hack đơn giản là chỉ cần thêm dòng sau vào các yếu tố:

li:hover { 
    transform: scale(1,1); 
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    -o-transform: scale(1,1); 
    -ms-transform: scale(1,1); 
} 

WORKING EXAMPLE

Mặc dù, điều này chỉ có thể hoạt động cho các tình huống cụ thể. Tôi đã chỉ thử nghiệm nó trên ví dụ của tôi ở trên.