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

box-shadow-trong-css-1

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;

box-shadow-trong-css-2

Để bóng đổ vào trong bạn sử dụng inset

box-shadow: 0px 0px 5px #000 inset;

box-shadow-trong-css-3

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