Được sử dụng để đổ bóng (thường được gọi là "Drop Shadows", giống như trong Photoshop) từ các phần tử. Dưới đây là một ví dụ với hỗ trợ trình duyệt sâu nhất có thể:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Đó là:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Độ lệch ngang (bắt buộc) của bóng, dương có nghĩa là bóng sẽ ở bên phải hộp, bù âm sẽ đặt bóng ở bên trái hộp.
- Độ lệch dọc (bắt buộc) của bóng đổ, giá trị âm có nghĩa là bóng hộp sẽ ở phía trên hộp, giá trị dương có nghĩa là bóng đổ sẽ ở dưới hộp.
- Bán kính mờ (bắt buộc), nếu đặt bằng 0 thì bóng sẽ sắc nét, số càng cao thì bóng mờ càng rõ và càng ra xa thì bóng sẽ càng mở rộng. Ví dụ: một bóng có độ lệch ngang 5px cũng có bán kính mờ 5px sẽ có tổng bóng tối là 10px.
- Bán kính trải rộng (tùy chọn), giá trị dương làm tăng kích thước của bóng, giá trị âm giảm kích thước. Mặc định là 0 (bóng có cùng kích thước với mờ).
- Màu (bắt buộc) - nhận bất kỳ giá trị màu nào, như hex, được đặt tên, rgba hoặc hsla. Nếu giá trị màu bị bỏ qua, bóng hộp sẽ được vẽ bằng màu nền trước (văn bản
color). Nhưng hãy lưu ý, các trình duyệt WebKit cũ hơn (trước Chrome 20 và Safari 6) bỏ qua quy tắc khi màu bị bỏ qua.
Sử dụng màu bán trong suốt như rgba(0, 0, 0, 0.4)là phổ biến nhất và tạo ra một hiệu ứng đẹp, vì nó không che phủ hoàn toàn / độc quyền những gì đã qua, nhưng cho phép những gì bên dưới hiển thị qua một chút, giống như một cái bóng thực.
Thí dụ
Bóng bên trong
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Thí dụ
Internet Explorer (8 trở xuống) Box Shadow
Bạn cần một yếu tố bổ sung, nhưng nó có thể với filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Chỉ một bên
Sử dụng bán kính lan truyền âm, bạn có thể nhận được bóng đè trong hộp và chỉ đẩy nó ra khỏi một cạnh của hộp.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Nhiều đường viền và hơn thế nữa
Bạn có thể dấu phẩy hộp-bóng riêng biệt nhiều lần tùy thích. Ví dụ: điều này hiển thị hai bóng có vị trí khác nhau và màu sắc khác nhau trên cùng một phần tử:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Ví dụ cho thấy cách bạn có thể sử dụng nó để tạo nhiều đường viền:
Xem sự mát mẻ của Pen Multi box-shadow! của Chris Coyier (@chriscoyier) trên CodePen.
Bằng cách áp dụng bóng cho các phần tử giả mà bạn thao tác sau đó, bạn có thể có được một số bóng hộp 3D trông khá lạ mắt:
Xem Pen CSS3 Box Shadows Effects của Halil İbrahim Nuroğlu (@haibnu) trên CodePen.
Bóng siêu mịn thông qua nhiều giá trị được phân tách bằng dấu phẩy:
Xem Pen
Smooth box-shadow của Chris Coyier (@chriscoyier)
trên CodePen.
Hỗ trợ trình duyệt
Xem đoạn mã ở đầu trang để biết chi tiết cụ thể về phạm vi tiền tố của nhà cung cấp. Đây là một trong những thuộc tính mà việc loại bỏ các tiền tố là khá hợp lý vào thời điểm này.