Có thể có bóng bao quanh toàn bộ DIV không?Thêm bóng hộp CSS xung quanh toàn bộ DIV
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
Tôi biết thứ tự của các thuộc tính đi:
Nhưng tôi tự hỏi, nếu nó có thể làm cho bóng đi xung quanh nó thay vì hiển thị chỉ lên trên một cạnh hoặc cạnh.
Chỉ cần không bù trừ?
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
Không hoạt động trong IE <8. Mọi cách giải quyết? – Si8
@ SiKni8 Vâng, hình ảnh ... –
Gỡ cài đặt @ SiKni8 và tải xuống trình duyệt mới. –
Vâng, không bù đắp theo chiều dọc hoặc chiều ngang, và sử dụng một bán kính mờ tương đối lớn: fiddle
Ngoài ra, bạn có thể sử dụng nhiều hộp bóng nếu bạn tách chúng bằng dấu phẩy. Điều này sẽ cho phép bạn tinh chỉnh nơi họ làm mờ và họ mở rộng bao nhiêu. Ví dụ mà tôi cung cấp là không thể phân biệt từ một lớn outline, nhưng nó có thể được tinh chỉnh nhiều hơn đáng kể: fiddle
Bạn bỏ lỡ bất động sản mới nhất và phù hợp nhất của box-shadow, đó là spread-distance. Bạn có thể chỉ định một giá trị cho bao nhiêu cái bóng mở rộng hoặc hợp đồng (làm ví dụ thứ hai của tôi đã lỗi thời): fiddle
Danh sách bất động sản đầy đủ là:
hộp bóng: [ngang bù đắp] [dọc bù đắp] [blur-radius] [spread-distance] [color] inset?
Nhưng tốt hơn nữa, hãy đọc qua số spec.
Chỉ cần sử dụng mã bên dưới. Nó sẽ shadow bao quanh toàn bộ DIV
-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); -moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
Hy vọng điều này sẽ làm việc
Tại sao một mờ 5px cho Mozilla và WebKit nhưng 3px cho những người khác? – BoltClock
Vì tôi đã sử dụng Chrome khi thử nghiệm nên tôi chỉ thay đổi hộp đổ bóng ... xin lỗi – Warface