Show
box-shadow là gì?<!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>6 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 <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>7, 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 ( <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>8), theo chiều dọc ( <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>9), tạo độ mờ ( div {
border: 3px solid #ffcccc;
height: 100px;
line-height: 100px;
margin: 30px;
text-align: center;
width: 200px;
}0), tạo shadow phân tán (div {
border: 3px solid #ffcccc;
height: 100px;
line-height: 100px;
margin: 30px;
text-align: center;
width: 200px;
}1) 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;
}2).
Mã màu Tên màu Giá trị rgba#ff0000; red rgba(183, 183, 183, 0.5); <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html> 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 <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>6: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 <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>0 Hiển thị trình duyệt: điều chỉnh shadow theo chiều ngang: Khi thiết kế giao diện website, bạn có thể dùng thuộc tính box-shadow cho vùng giao diện nào đó để tăng hiệu ứng nhìn trực quan và thẩm mỹ cho trang. Thuộc tính CSS này đều được hỗ trợ ở tất cả trình duyệt Web phiên bản mới nhất, vì vậy bạn cứ yên tâm sử dụng. Thuộc tính box-shadowThuộc tính này dùng để tạo bóng mờ cho một vùng giao diện hay phần tử HTML (thường dạng khối – block). Cú pháp:
Tạo bóng với tham số h-offset, v-offset, blur và colorỞ ví dụ này, chúng ta sẽ tạo bóng mờ và với màu sắc của bóng cũng như vị trí xuất hiện của bóng.  <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>1 Tạo bóng với tham số spreadTham số spread giúp trải rộng kích thước bóng, bạn có thể thử thông qua ví dụ sau. <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>2 Tạo nhiều bóng 1 lúcỨng với mỗi bóng bạn chỉ cần định nghĩa cách nhau dấu phẩy trong thuộc tính box-shadow. Điều này giúp bạn tạo nhiều bóng, thậm chí tạo được cả hiệu ứng cầu vồng nếu muốn. <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>3 Ví dụ này sử dụng tham số inset dùng để tạo bóng bên trong vùng giao diện thay vì bên ngoài như thông thường. <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>4 Tạo bóng cầu vồng trònTrong ví dụ này, bạn sẽ học cách tạo bóng cầu vòng với nhiều màu sắc. Ví dụ sử dụng border-radius: 50% để tạo hình tròn cho vùng giao diện. <!DOCTYPE HTML> <html> <head></head> <body> <div>Box - shadow</div> </body> </html>5 Ngoài ra, thuộc tính box-shadow còn được áp dụng để tạo viền cho hình ảnh, album, và các đối tượng khác để làm giao diện Web trực quan. Chúc các bạn thành công nhé! |
