- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- box-shadow
box-shadow là gì?
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }2 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
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }3, 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 [
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }4], theo chiều dọc [
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }5], tạo độ mờ [
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }6], tạo shadow phân tán [
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }7] 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 [
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }8].
h-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
v-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
v-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
v-offset | px em em | 5px | Điều chỉnh khoảng cách shadow theo chiều ngang |
v-offset | Điều chỉnh khoảng cách shadow theo chiều dọc Tên màu Giá trị rgba | blur red rgba[183, 183, 183, 0.5]; | Điều chỉnh độ mờ của shadow |
spread | Điều chỉnh độ phân tán của shadow | Đ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];
Box - shadow
Các giá trị màu có thể có của shadow
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }
optional
inset
Shadow bên trong thành phần
div {
border: 3px solid #ffcccc;
box-shadow: 0px 0px 5px 5px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
optional
inset
Shadow bên trong thành phần
div {
border: 3px solid #ffcccc;
box-shadow: 10px 0px 5px 5px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
Cách sử dụng
div {
border: 3px solid #ffcccc;
box-shadow: 0px 10px 5px 5px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
HTML viết:
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;
}
CSS viết - khi chưa sử dụng div {
border: 3px solid #ffcccc;
height: 100px;
line-height: 100px;
margin: 30px;
text-align: center;
width: 200px;
}
2:
Hiển thị trình duyệ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;
}
Bây giờ ta sẽ sử dụng div {
border: 3px solid #ffcccc;
height: 100px;
line-height: 100px;
margin: 30px;
text-align: center;
width: 200px;
}
2 để chỉnh shadow cho box như sau:
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;
}
CSS viết:
div {
border: 3px solid #ffcccc;
box-shadow: 0 4px 2px -3px;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
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 div {
border: 3px solid #ffcccc;
height: 100px;
line-height: 100px;
margin: 30px;
text-align: center;
width: 200px;
}
4 và div {
border: 3px solid #ffcccc;
height: 100px;
line-height: 100px;
margin: 30px;
text-align: center;
width: 200px;
}
5 để xem thay đổi:
0Box - shadow
Hiển thị trình duyệt: điều chỉnh shadow theo chiều ngang:
- 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.
- Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 10px #0000cc;
- CSS3
- 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.
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:
1Box - shadow
Hiển thị trình duyệt khi có box-shadow: 5px 5px 10px 10px #0000cc inset;
2Box - shadow
Trang chủ
Tham khảo
3Box - shadow
CSS
Ví dụ về thuộc tính box-shadow
4Box - 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:
Tham khảo
CSS
Ví dụ về thuộc tính box-shadow
Thuộc tính box-shadow với giá trị ngang và dọc
6Box - shadow
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:
7Box - shadow
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:
8Box - shadow
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:
9Box - shadow
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:
Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 30px;
Thêm thuộc tính box-shadow , CSS viết:
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }0
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:
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; }1