box-shadow là gì?
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: ...
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).
| Giá trị | Đơn vị | VD | Mô tả |
|---|---|---|---|
| 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:
<!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>
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;
awidth: 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;
awidth: 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;
awidth: 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;
awidth: 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;
awidth: 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;
awidth: 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;
awidth: 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;
awidth: 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;
awidth: 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é.
border-radius
text-shadow
