Bóng không hiển thị

Question

Tôi đang cố gắng đặt bóng vào một trong các div và nó không hiển thị. Dưới đây là một div nơi tôi đang cố gắng để thực hiện cái bóng:

#intro { 
    padding: 0px; 
    margin: 0px auto; 
    width: 100%; 
    float:inherit; 
    overflow: hidden; 
    height: 800px; 
    position:inherit; 
    background-color: #00b3e1;; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8); 
} 

đây là URL: http://rachelchaikof.com/awareness/

Answer 1

hãy xem câu trả lời Chris Herbert của dưới đây để biết các giải pháp đúng

câu trả lời trước:

để được hỗ trợ trong chrome, moz, safari:

-moz-box-shadow:0 0 8px 0 black; 
-webkit-box-shadow:0 0 8px 0 black; 
box-shadow:0 0 8px 0 black; 

tức là hỗ trợ là xa phức tạp hơn, xem:

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color='#33000000'); 

Answer 2

Lý do bạn không thể nhìn thấy bóng là do div tiếp theo (#one) là trực tiếp dưới nó, và cái bóng rendering bên dưới #one. Xóa hình nền khỏi #one và bóng sẽ hiển thị.

Thêm phần này vào CSS # giới thiệu để làm cho bóng tối có thể nhìn thấy:

position: relative; 
z-index: 10; 

Nếu bạn muốn bóng tối có thể nhìn thấy trên các lĩnh vực văn bản khác, bạn sẽ cần phải điều chỉnh giá trị z-index của họ là tốt, với phần tử trên cùng (#intro) có giá trị cao nhất.

Answer 3

Một tình huống khác mà tôi đã có ngày hôm nay. Hộp bóng không xuất hiện bất chấp vị trí thiết lập liên quan đến div. Rõ ràng là không có nội dung bên cạnh div này có bóng hộp.

Khi nội dung được thêm vào, hộp bóng sẽ xuất hiện.