Hướng dẫn box-shadow trong css - box-shadow trong css
Show
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úctag {
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).
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 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;
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 0 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ị 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:1 Hiển thị trình duyệt khi có box-shadow: 5px 5px 10px 10px #0000cc inset;2 Trang chủTham khảo3 CSSVí dụ về thuộc tính box-shadow4 Thuộc tính box-shadow với giá trị ngang và dọcThuộ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ảoCSS Ví dụ về thuộc tính box-shadowThuộc tính box-shadow với giá trị ngang và dọc6 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:7 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:8 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ắcThuộ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:9 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;
}0Hiể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;
}1Hiển thị trình duyệt khi có box-shadow: 5px 5px 10px 10px #0000cc inset; |
