- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- box-shadow
box-shadow là gì?
box-shadow
là thuộc tính được tạo ra nhằm xử lý bóng đổ [shadow] cho thành phần, nếu như trước đây để tạo
được shadow, ta cần dùng background-image
, và xử lý transparence phức tạp, thì giờ đây việc này sẽ vô cùng đơn giản.
Cấu trúc
tag {
box-shadow: h-offset v-offset blur spread color optional;
}
box-shadow có tất cả 5 giá trị chính, lần lượt điều khiển shadow dịch chuyển theo chiều ngang [h-offset
], theo chiều dọc [v-offset
], tạo độ mờ [blur
], tạo shadow phân tán [spread
] và màu cho shadow, và 1 giá trị tùy chọn, được dùng thay đổi tính chất shadow theo vị trí bên ngoài hay bên trong thành phần [inset
].
h-offset | px em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
v-offset | px em | 5px | Điều chỉnh khoảng cách shadow theo chiều dọc |
blur | px em | 5px | Điều chỉnh độ mờ của shadow |
spread | px em | 5px | Điều chỉnh độ phân tán của shadow |
color | Mã màu Tên màu Giá trị rgba | #ff0000; red rgba[183, 183, 183, 0.5]; | Các giá trị màu có thể có của shadow |
optional | inset | inset | Shadow bên trong thành phần |
Cách sử dụng
HTML viết:
Box - shadow
CSS viết - khi chưa sử dụng box-shadow
:
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }
Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng box-shadow
để chỉnh shadow cho box như sau:
CSS viết:
div {
border: 3px solid #ffcccc;
box-shadow: 0px 0px 5px 5px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
Hiển thị trình duyệt:
Với cách viết như trên, ta thấy shadow đã được tạo một cách dễ dàng với 1 dòng lệnh, ta có thể điều chỉnh
h-offset
và v-offset
để xem thay đổi:
Hiển thị trình duyệt: điều chỉnh shadow theo chiều ngang:
div {
border: 3px solid #ffcccc;
box-shadow: 10px 0px 5px 5px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
Hiển thị trình duyệt: điều chỉnh shadow theo chiều dọc
div {
border: 3px solid #ffcccc;
box-shadow: 0px 10px 5px 5px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
box-shadow
với inset
div {
border: 3px solid #ffcccc;
box-shadow: box-shadow: 0px -1px 5px 3px #999 inset;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
Ví dụ thêm - Một số box-shadow
thường dùng
Shadow nhạt
div {
border: 3px solid #ffcccc;
box-shadow: 0 1px 5px rgba[0, 0, 0, 0.3];
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
Shadow đậm
div {
border: 3px solid #ffcccc;
box-shadow: 0 0 5px 2px rgba[0, 0, 0, 0.6];
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
Shadow bên dưới gần
div {
border: 3px solid #ffcccc;
box-shadow: 0 4px 2px -3px;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
Shadow bên dưới xa
div {
border: 3px solid #ffcccc;
box-shadow: 0px 10px 6px -6px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
Tới đây chắc các bạn đã biết cách dùng box-shadow
như thế nào rồi he, các bạn cũng có thể xem nhiều ví dụ hơn tại phần tham khảo box-shadow hoặc xem công cụ tạo box-shadow nhé.
- Trang chủ
- Tham khảo
- CSS
- CSS3
- Ví dụ về thuộc tính box-shadow
Thuộc tính box-shadow với giá trị ngang và dọc
Thuộc tính box-shadow với giá trị ngang và dọc: Định vị trí bóng nằm ngang và dọc cho thành phần [có thể dùng số âm], đây là thuộc tính bắt buộc.
HTML viết:
box-shadow
CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; }
Hiển thị trình duyệt khi chưa có box-shadow:
Thêm thuộc tính box-shadow, CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; box-shadow: 30px 30px; -moz-box-shadow: 30px 30px; -webkit-box-shadow: 30px 30px; -o-box-shadow: 30px 30px; -ms-box-shadow: 30px 30px; }
Hiển thị trình duyệt khi có box-shadow: 30px 30px;
Thuộc tính box-shadow với giá trị âm, CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; box-shadow: -10px -10px; -moz-box-shadow: -10px -10px; -webkit-box-shadow: -10px -10px; -o-box-shadow: -10px -10px; -ms-box-shadow: -10px -10px; }
Hiển thị trình duyệt khi có box-shadow: -10px -10px;
Thuộc tính box-shadow với giá trị độ mờ [blur]
Thuộc tính box-shadow với giá trị độ mờ: Định khoảng cách mờ cho bóng.
Thêm thuộc tính box-shadow, CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; box-shadow: 30px 30px 10px; -moz-box-shadow: 30px 30px 10px; -webkit-box-shadow: 30px 30px 10px; -o-box-shadow: 30px 30px 10px; -ms-box-shadow: 30px 30px 10px; }
Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px;
Tăng thêm giá trị độ mờ cho box-shadow, CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; box-shadow: 30px 30px 30px; -moz-box-shadow: 30px 30px 30px; -webkit-box-shadow: 30px 30px 30px; -o-box-shadow: 30px 30px 30px; -ms-box-shadow: 30px 30px 30px; }
Hiển thị trình duyệt khi có box-shadow: 30px 30px 30px;
Thuộc tính box-shadow với giá trị độ lan rộng [spread]
Thuộc tính box-shadow với giá trị độ lan rộng: Tăng hoặc giảm độ lan rộng cho bóng.
Thêm thuộc tính box-shadow , CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; box-shadow: 30px 30px 10px 10px; -moz-box-shadow: 30px 30px 10px 10px; -webkit-box-shadow: 30px 30px 10px 10px; -o-box-shadow: 30px 30px 10px 10px; -ms-box-shadow: 30px 30px 10px 10px; }
Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 10px;
Tăng thêm giá trị độ lan rộng cho box-shadow, CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; box-shadow: 30px 30px 10px 30px; -moz-box-shadow: 30px 30px 10px 30px; -webkit-box-shadow: 30px 30px 10px 30px; -o-box-shadow: 30px 30px 10px 30px; -ms-box-shadow: 30px 30px 10px 30px; }
Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 30px;
Thuộc tính box-shadow với giá trị màu sắc
Thuộc tính box-shadow với giá trị màu sắc: Định màu sắc cho bóng.
Thêm thuộc tính box-shadow , CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; box-shadow: 30px 30px 10px 10px #0000cc; -moz-box-shadow: 30px 30px 10px 10px #0000cc; -webkit-box-shadow: 30px 30px 10px 10px #0000cc; -o-box-shadow: 30px 30px 10px 10px #0000cc; -ms-box-shadow: 30px 30px 10px 10px #0000cc; }
Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 10px #0000cc;
Thuộc tính box-shadow với giá trị inset
Thuộc tính box-shadow với giá trị inset: Thay đổi bóng từ ngoài tối vào trong sáng.
Thêm thuộc tính box-shadow , CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; box-shadow: 30px 30px 10px 10px #0000cc inset; -moz-box-shadow: 30px 30px 10px 10px #0000cc inset; -webkit-box-shadow: 30px 30px 10px 10px #0000cc inset; -o-box-shadow: 30px 30px 10px 10px #0000cc inset; -ms-box-shadow: 30px 30px 10px 10px #0000cc inset; }
Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 10px #0000cc inset;
Xem ví dụ khác của thuộc tính box-shadow, CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; box-shadow: 5px 5px 10px 10px #0000cc inset; -moz-box-shadow: 5px 5px 10px 10px #0000cc inset; -webkit-box-shadow: 5px 5px 10px 10px #0000cc inset; -o-box-shadow: 5px 5px 10px 10px #0000cc inset; -ms-box-shadow: 5px 5px 10px 10px #0000cc inset; }