Show box-shadow là gì?
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 (
Cách sử dụngHTML viết: <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html> 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;
}Hiển thị trình duyệt: Bây giờ ta sẽ sử dụng 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
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;
}
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ùngShadow 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
text-shadow là gì?Tương tự như Cấu trúctag {
text-shadow: h-offset v-offset blur color;
}
Cách sử dụngHTML viết: <!DOCTYPE HTML> <html> <head></head> <body> <div>Text shadow</div> </body> </html> CSS viết - khi chưa sử dụng div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
}Hiển thị trình duyệt: Bây giờ ta sẽ sử dụng CSS viết: div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}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 Ví dụ thêm - Một số text-shadow thường dùngShadow dưới gần div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}Shadow lan xung quanh div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}Shadow dưới nhạt div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
}Các bạn có thể xem nhiều ví dụ hơn tại tham khảo text-shadow hoặc xem công cụ tạo text-shadow nhé. |
