Hộp đổ bóng CSS trên ba mặt của div?

Question

Tôi muốn có hộp bóng trên ba mặt của div (ngoại trừ mặt trên). Làm thế nào tôi có thể làm điều đó?

Answer 1

Dưới đây là JS Fiddle cho bạn, nó chỉ sử dụng một div duy nhất để hoạt động.

#shadowBox { 
    background-color: #ddd; 
    margin: 0px auto; 
    padding: 10px; 
    width: 220px; 
    box-shadow: 0px 8px 10px gray, 
     -10px 8px 15px gray, 10px 8px 15px gray; 
} 

Bạn đặt bóng ở dưới cùng, dưới cùng bên trái và dưới cùng bên phải. Với các bóng mềm, nó hơi phức tạp một chút nhưng có thể thực hiện được. Nó chỉ cần một chút phỏng đoán để giảm bán kính mờ của bóng giữa, sao cho nó trông liền mạch và không quá tối khi nó chồng chéo với bóng bên.

Answer 2

Dưới đây là một ví dụ về giá trị Y tiêu cực được đề xuất bởi @Vigrond

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

Answer 3

Nếu bạn có một màu nền vững chắc, sau đó bạn có thể thực hiện điều này bằng cách sử dụng một sự kết hợp của background-color và z-index. Bí quyết là đưa phần tử với box-shadow và vị trí anh chị em trước đó của nó, sau đó cung cấp cho anh chị em trước một màu nền và thiết lập nó để có một cao hơn z-index sao cho nó xếp chồng lên nhau trên phần tử với box-shadow, có hiệu lực che phủ bóng trên cùng của nó.

Bạn có thể thấy một bản demo ở đây: http://codepen.io/thdoan/pen/vNvpKv

Nếu không có anh chị em ruột ngay trước đó để làm việc với, sau đó bạn cũng có thể sử dụng một pseudo-yếu tố như :before hoặc :after: http://codepen.io/thdoan/pen/ojJEMj

Answer 4

Nếu bạn đang tìm kiếm cho một cái gì đó như Google bóng thiết kế vật liệu:

.shadow1 { 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 
.shadow2 { 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
} 
.shadow3 { 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
} 
.shadow4 { 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
} 
.shadow5 { 
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 
} 

Nguồn: https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10

Answer 5

Đối với bóng mờ với góc cứng (tức là không có bán kính mờ) Tôi đã sử dụng điều này:

.shadow-no-top { 
    position: relative; 
    box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2); 
} 
.shadow-no-top:before { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: -5px; 
    right: -5px; 
    bottom: -5px; 
    background-color: rgba(0,0,0,.2); 
} 

Điều này sử dụng bóng cho phần bên trái và bên phải và thêm: sau nội dung giả dưới bóng dưới cùng. Điều này tránh trùng lặp làm cho bóng tối hơn hoặc góc bị thiếu.

Tuy nhiên, điều này yêu cầu nền của phần tử phải cứng.