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 CSS 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é.
