Hộp đổ bóng CSS chỉ xuất hiện với lề

Question

Vì vậy, trang web của tôi có tiêu đề và div chứa Thanh trượt cuộc cách mạng ngay sau đó. Tôi đang cố thêm một hộp đổ bóng bên dưới tiêu đề - và phía trên thanh trượt. Nhưng nó không hoạt động, trừ khi tôi cũng thêm margin-bottom vào tiêu đề - nhưng điều đó làm cho toàn bộ bài tập bắt đầu.

Đây là mã:

#header { 
 
    display:block; 
 
    min-height: 99px; 
 
    background: #FFFFFF; 
 
    border-top: 3px solid #8dddcd; 
 
    border-bottom: 1px solid #ecf0f1; 
 
    line-height: 99px; 
 
    box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3); 
 
} 
 
#rev { 
 
    position: relative; 
 
}

<div id="header"></div> 
 
<div id="rev">the slider</div>

một người nào đó có thể giúp tôi tìm ra những gì gây ra điều này?

Answer 1

Trên thực tế, vấn đề hóa ra có liên quan đến z-index thuộc tính của divs khác nhau. Với một số tinh chỉnh, tôi quản lý để có được tất cả được sắp xếp ra mà không sử dụng bất kỳ lợi nhuận.

Dù sao, cảm ơn tất cả vì đã dành thời gian và trợ giúp!

Answer 2

Khi bạn sử dụng chế độ hiển thị mặc định cho hộp đổ bóng (bóng bên ngoài), bạn cần thêm lề theo hướng đó (10px trên trục y trong ví dụ của bạn) để nội dung hộp bị tràn sẽ hiển thị. Nếu bạn muốn hiển thị bóng của hộp bên trong tiêu đề, chỉ cần thêm từ khóa inset vào khai báo của bạn.

Answer 3

Xem các câu hỏi sau:

• Does css border-shadow add to an element's size
• Is css box-shadow part of element's box model?

Theo box-shadow spec:

Một phép nối ngoài hộp bóng đã phủ bóng đen như thể border- hộp của nguyên tố bị đục. Cái bóng được rút ra bên ngoài mép biên giới chỉ

Vì vậy, nếu bạn không muốn chồng chéo, bạn sẽ có thêm lề khỏang

#header { 
 
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3); 
 
    margin-bottom: 10px; 
 
} 
 
#slider { 
 
    position: relative; 
 
}

<div id="header">Header</div> 
 
<div id="slider">Slider</div>

Answer 4

Nếu bạn cần như bạn nói hộp đổ bóng bên dưới tiêu đề chỉ và phía trên thanh trượt, bạn có thể sử dụng dấu trừ trong số cuối cùng trong hộp bóng như sau:

box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3); 

Điều này sẽ làm cho bóng đổ bóng chỉ xuất hiện ở dưới cùng.

dụ làm việc:

#header { 
 
    display:block; 
 
    min-height: 99px; 
 
    background: #FFFFFF; 
 
    border-top: 3px solid #8dddcd; 
 
    border-bottom: 1px solid #ecf0f1; 
 
    line-height: 99px; 
 
    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3); 
 
} 
 
#rev { 
 
    position: relative; 
 
}

<div id="header"></div> 
 
<div id="rev">the slider</div>