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 ví dụ về Box shadow sau đây:
<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về thuộc tính Box shadow trong CSS </title>
<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é.
