Sở hữu bóng hộp CSS3 cho phép thêm mà không cần sử dụng hình ảnh một hiệu ứng đổ bóng cho các yếu tố được chọn.
Các giá trị khác nhau của bóng tối-box , chúng tôi có thể xác định rằng bóng là vị trí phía dưới / trái / phải hoặc hàng đầu trên bên ngoài của phần tử, độ dốc của nó mờ và màu sắc của nó .
Hộp bóng không phải là một phần của cái gọi là "mô hình hộp, có nghĩa là bóng tối không phải là xem xét trong tổng số biện pháp cuối cùng của nguyên tố này.
Tài sản CSS3 có thể được kết hợp với các tài sản khác chẳng hạn như CSS3 biên giới-bán kính.
Lưu ý: Các tài sản CSS3 hộp bóng là tại thời điểm được hỗ trợ bởi Safari 3.1 + thêm các tiền tố webkit , Firefox 3.5 + thêm tiền tố -moz . (Cập nhật tháng 5 năm 2009)
Yêu cầu ít nhất 3 giá trị, 4 tối đa các hộp bóng :
- chiều dài theo chiều ngang của bóng tối
- Giá trị này có thể được tích cực cho một cái bóng bên phải hay tiêu cực cho một hiệu ứng bên trái.
- Ví dụ: hộp-bóng tối: 10px 10px 20px # 000000; hộp bóng tối: 10px10px 20px # 000000;
- chiều dài theo chiều dọc của bóng tối
- Giá trị này có thể được tích cực cho một bóng hàng đầu hay tiêu cực cho một hiệu ứng ở phía dưới.
- Ví dụ: hộp-bóng tối: 10px 10px 20px # 000000; hộp bóng tối: 10px -10px 20px # 000000;
- bán kính mờ - mức độ của bóng mờ
- Giá trị này chỉ có thể được tích cực với không là mức tối thiểu
- Cao nhất là giá trị này, càng có nhiều mờ sẽ là bóng tối
- Giá trị này có thể được bỏ qua, bằng với giá trị tối thiểu là 0 cho không mờ và các cạnh gọn gàng.
- Ví dụ: hộp-bóng tối: 10px 10px 20px # 000000; hộp bóng tối: 10px 10px 0 # 000000; bằng bóng-box: 10px 10px # 000000;
- màu của bóng tối
- Ví dụ: hộp-bóng tối: 10px 10px 20px # 000000 ; hộp bóng tối: 10px 10px 20px đen , hộp bóng tối: 10px 10px 20px rgb (0,0,0) ;
- Ví dụ: hộp-bóng tối: 10px 10px 20px # 000000 ; hộp bóng tối: 10px 10px 20px đen , hộp bóng tối: 10px 10px 20px rgb (0,0,0) ;
Lưu ý: trong dự thảo làm việc của W3C cho tài sản CSS3 hộp bóng, 2 người khác giá trị được đề xuất nhưng không thực sự được hỗ trợ bởi bất kỳ trình
duyệt: - 'bán kính lây lan thêm cái bóng theo hướng tất cả các
phần tử ' inset 'để thêm một bóng tối bên trong thay vì một bên ngoài
duyệt: - 'bán kính lây lan thêm cái bóng theo hướng tất cả các
phần tử ' inset 'để thêm một bóng tối bên trong thay vì một bên ngoài
Ví dụ của bóng tối-box
1. Hộp-bóng với giá trị tích cực
Xem trước được thực hiện với Safari 3.1:
Kết quả là:
ô-bóng tối: 10px 10px 20px # 000;
-webkit-box-shadow: 10px 10px 20px # 000;
-moz-box-shadow: 10px 10px 20px # 000;
-webkit-box-shadow: 10px 10px 20px # 000;
-moz-box-shadow: 10px 10px 20px # 000;
2. Box-bóng có giá trị tiêu cực
Xem trước được thực hiện với Safari 3.1:
Kết quả là:
ô-bóng tối: 20px 20px 5px # 000;
-webkit-box-shadow: 20px-20px 5px # 000;
-moz-box-shadow: 20px-20px 5px # 000;
-webkit-box-shadow: 20px-20px 5px # 000;
-moz-box-shadow: 20px-20px 5px # 000;
3. Box bóng không mờ quy định (bằng không)
Xem trước được thực hiện với Safari 3.1:
Kết quả là:
ô-bóng tối: 10px 5px # 000;
-webkit-box-shadow:-10px 5px # 000;
-moz-box-shadow: 10px 5px # 000;
-webkit-box-shadow:-10px 5px # 000;
-moz-box-shadow: 10px 5px # 000;
4. Box bóng + biên giới-bán kính
Xem trước được thực hiện với Safari 3.1:
Kết quả là:
hộp-shadow: 5px 5px 10px # 000;
webkit-box-shadow: 5px 5px 10px # 000;
-moz-box-shadow: 5px 5px 10px # 000000;
biên giới-bán kính: 25px;-moz-biên giới- bán kính: 25px;-webkit biên giới-bán kính: 25px;
webkit-box-shadow: 5px 5px 10px # 000;
-moz-box-shadow: 5px 5px 10px # 000000;
biên giới-bán kính: 25px;-moz-biên giới- bán kính: 25px;-webkit biên giới-bán kính: 25px;
5. Box bóng áp dụng cho 2 yếu tố láng giềng - bằng chứng cho thấy bóng tối không phải là một phần của mô hình hộp
Xem trước được thực hiện với Safari 3.1:
Kết quả là: