Hộp CSS3 ở trên cùng, bên trái và bên phải Chỉ

Question

Lời chào,

Tôi đang cố gắng áp dụng bóng hộp CSS3 để chỉ trên cùng, bên phải và bên trái của DIV có bán kính phù hợp với kết quả của theo CSS (trừ bóng dưới cùng)

#div { 
    -webkit-box-shadow: 0px 0px 10px #000; 
    -moz-box-shadow: 0px 0px 10px #000; 
    box-shadow: 0px 0px 10px #000; 
} 

Cách tốt nhất để thực hiện điều này là gì?

Cảm ơn!

CẬP NHẬT Bóng này sẽ được áp dụng cho thanh điều hướng trên trang, thanh được đặt ở trên cùng của vùng chứa chính DIV. Những gì tôi đang cố gắng để đạt được là tiếp tục bóng của hộp DIV chính vào thanh điều hướng, nằm phía trên nó, nhưng không có bóng dưới cùng trên thanh điều hướng. Hãy xem site itself để xem những gì tôi đang nói đến, dễ dàng hơn việc thêm tất cả HTML và CSS tại đây.

UPDATE 2 Kể từ khi DIV tôi đang làm việc với là số ít, chứ không phải cố gắng để đặt một cái bóng trên mỗi li nav, tôi được bầu để thay đổi nó như sau:

-webkit-box-shadow: 0px -4px 7px #e6e6e6; 
    -moz-box-shadow: 0px -4px 7px #e6e6e6; 
    box-shadow: 0px -4px 7px #e6e6e6; 

Điều này làm cho đầu của bóng rất đáng chú ý nhưng đó là những gì tôi đang cố gắng để thực hiện - nếu bất cứ ai biết về một cách để giữ bóng cùng xuất hiện với container DIV, xin vui lòng cho tôi biết. Cảm ơn!

Answer 1

Sẽ tốt hơn nếu bạn chỉ che phần dưới cùng với một div khác và bạn sẽ nhận được bóng thả đồng nhất trên bảng.

#servicesContainer { 
    /*your css*/ 
    position: relative; 
} 

và nó đã được sửa! như phép màu!

Answer 2

Thêm câu trả lời riêng biệt vì câu trả lời hoàn toàn khác.

Bạn có thể sử dụng rgba và đặt kênh alpha thấp (để có độ trong suốt) để làm cho bóng thả của bạn kém rõ rệt hơn.

Hãy thử một cái gì đó như thế này (chơi với .5)

-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); 
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); 
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); 

Hope this helps!

Answer 3

sử dụng giá trị chênh lệch ...

hộp bóng có giá trị sau

box-shadow: x y blur spread color; 

vì vậy bạn có thể sử dụng một cái gì đó giống như ..

box-shadow: 0px -10px 10px -10px black; 

UPDATE: tôi thêm một jsfiddle

Answer 4

Bạn có thể cung cấp nhiều giá trị để hộp bóng tài sản
ví dụ

-moz-box-shadow: 0px 10px 12px 0px #000, 
        0px -10px 12px 0px #000; 
-webkit-box-shadow: 0px 10px 12px 0px #000, 
        0px -10px 12px 0px #000; 
box-shadow: 0px 10px 12px 0px #000, 
      0px -10px 12px 0px #000; 

nó là hiệu ứng bóng đổ để trái và chỉ chỉ, bạn c một thích ứng với nó để yêu cầu của bạn

Answer 5

Tôi tìm thấy một cách để che bóng với ": sau", đây là mã của tôi:

#div:after { 
    content:""; 
    position:absolute; 
    width:5px; 
    background:#fff; 
    height:38px; 
    top:1px; 
    right:-5px; 
} 

Answer 6

Các mã sau đây đã làm nó cho tôi để thực hiện một inset bóng của phía bên phải:

-moz-box-shadow: inset -10px 0px 10px -10px #000; 
-webkit-box-shadow: inset -10px 0px 10px -10px #000; 
box-shadow: inset -10px 0px 10px -10px #000; 

Hy vọng nó sẽ giúp !!!!

Answer 7

Tôi đã gặp sự cố tương tự và đang tìm kiếm ý tưởng có thể giải quyết vấn đề này.

tôi đã có một số CSS đã được tại chỗ cho các tab của tôi và đây là những gì làm việc cho tôi:

(Lưu ý đặc biệt là padding-bottom: 2px; bên #tabs #selected a { Đó ẩn dưới box-shadow gọn gàng và làm việc tuyệt vời cho tôi với CSS sau đây..)

#tabs { 
    margin-top: 1em; 
    margin-left: 0.5em; 
} 
#tabs li a { 
    padding: 1 1em; 
    position: relative; 
    top: 1px; 
    background: #FFFFFF; 
} 
#tabs #selected { 
    /* For the "selected" tab */ 
    box-shadow: 0 0 3px #666666; 
    background: #FFFFFF; 
} 
#tabs #selected a { 
    position: relative; 
    top: 1px; 
    background: #FFFFFF; 
    padding-bottom: 2px; 
} 
#tabs ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
#tabs li { 
    float: left; 
    border: 1px solid; 
    border-bottom-width: 0; 
    margin: 0 0.5em 0 0; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
} 

Nghĩ rằng tôi sẽ đưa điều này ra ngoài như một giải pháp khả thi khác cho bất kỳ ai perusing SO cho việc này.

Answer 8

Tôi biết điều này là rất cũ, nhưng không ai trong số những câu trả lời này đã giúp tôi, vì vậy tôi đang thêm câu trả lời của tôi. Câu trả lời này giống như câu trả lời của @ yichengliu, sử dụng phần tử Pseudo ::after.

#div { 
    position: relative; 
} 



#div::after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    width: 1px; 
    height: 100%; 
    z-index: -1; 

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
} 

/*or*/ 

.filter.right::after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 1px; 
    height: 100%; 
    background: white; 
    z-index: -1; 

    -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); 
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); 
} 

Fiddle

Nếu bạn quyết định thay đổi X của drop shadow (đo điểm ảnh đầu tiên của drop-shadow hoặc box-shadow), thay đổi chiều rộng sẽ giúp vì vậy nó không trông giống như có một màu trắng khoảng cách giữa div và bóng tối.

Nếu bạn quyết định thay đổi Y của bóng đổ (đo điểm ảnh thứ hai của drop-shadow hoặc box-shadow), việc thay đổi chiều cao sẽ giúp cho cùng một lý do như trên.

Answer 9

#div:before { 
content:""; 
position:absolute; 
width:100%; 
background:#fff; 
height:38px; 
top:1px; 
right:-5px; 
}