Trong quá trình tìm hiểu về CSS bạn sẽ gặp phải thuộc tính box-shadow hay còn gọi là đổ bóng cho phần tử HTML.
Bài viết này mình sẽ hướng dẫn bạn sử dụng box-shadow trong CSS cực kỳ đơn giản mời bạn cùng theo dõi nhé!
Thuộc tính Box-shadow trong CSS3 là gì?
Bạn thử chạy đoạn code sau:
<!DOCTYPE html> <html> <head> <style> .dobong{ height: 100px; width: 200px; background-color: #1ab800; box-shadow: 10px 10px #000; } </style> </head> <body> <div class="dobong"> </div> </body> </html>
Kết quả là:
Giải thích:
box-shadow: 10px 10px #000;
10px; bóng đổ về bên phải
10px; bóng sẽ để xuống dưới
Bây giờ thêm 2 dấu “-” trước giá trị:
box-shadow: -10px -10px #000;
Kết quả nó sẽ đổ bóng ngược lên
Bây giờ bạn sẽ thêm một giá trị 10px nữa:
box-shadow: 10px 10px 10px #000;
10px đây chính là độ nhoè của bóng, để thử bạn có thể thay bằng 20px chẳng hạn
Đổ bóng đều 4 phía trên, dưới, trái, phải thì bạn viết như sau:
box-shadow: 0px 0px 5px #000;
Để bóng đổ vào trong bạn sử dụng inset
box-shadow: 0px 0px 5px #000 inset;
Kết luận: Trên đây là bài viết hướng dẫn bạn cách sử dụng box-shadow trong CSS3 hi vọng sau khi đọc xong bạn có thể áp dụng để trang trí website đẹp hơn nhé.