Làm thế nào để áp dụng hộp bóng trên tất cả bốn mặt?

Question

Tôi đang cố gắng áp dụng box-shadow trên tất cả bốn mặt. Tôi chỉ có thể nhận được nó trên 2 mặt:

Answer 1

Đó là vì x và y bù đắp. Hãy thử điều này:

-webkit-box-shadow: 0 0 10px #fff; 
     box-shadow: 0 0 10px #fff; 

chỉnh sửa (năm sau ..): Made câu trả lời hơn qua trình duyệt, theo yêu cầu trong ý kiến ​​:)

btw: có rất nhiều máy phát điện css3 ngày nay .. css3.me, css3maker , css3generator vv ...

Answer 2

Xem: http://jsfiddle.net/thirtydot/cMNX2/8/

input { 
    -webkit-box-shadow: 0 0 5px 2px #fff; 
    -moz-box-shadow: 0 0 5px 2px #fff; 
    box-shadow: 0 0 5px 2px #fff; 
} 

Answer 3

này trông mát mẻ.

-moz-box-shadow: 0 0 5px #999; 
-webkit-box-shadow: 0 0 5px #999; 
box-shadow: 0 0 5px #999; 

Answer 4

Tôi tìm thấy trang web http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/.

.allSides 
{ 
    width:350px;height:200px; 
    border: solid 1px #555; 
    background-color: #eed; 
    box-shadow: 0 0 10px rgba(0,0,0,0.6); 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6); 
} 

Answer 5

Chỉ cần đơn giản như mã này:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/ 

Answer 6

Sử dụng mã này css cho tất cả bốn mặt: hộp-shadow: 0px 1px 7px 0px rgb (106, 111, 109);