Thuộc tính box-shadow trong CSS
Trần Thị Vân - 1223
- 17/07/2025
Chức năng của Thuộc tính box-shadow trong CSS
Thuộc tính box-shadow trong CSS dùng để đổ bóng cho các thẻ HTML, bao gồm đổ bóng ở ngoài hoặc bên trong, giúp thẻ HTML trở nên mượt mà hơn khi xuất hiện trên giao diện website.
Các hiệu ứng của Thuộc tính box-shadow trong CSS
Css box-shadow mặc định
box-shadow: 5px 10px #333
Cột 1 là đẩy từ trái qua 5px; cột 2 đẩy từ trên xuống 10px, cột 3 là màu của box-shadow.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css box-shadow mặc định</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:400px;height:200px;float:left;line-height:200px;text-align:center;background:#fff;border:1px solid #000;}
</style>
</head>
<body>
<h1>Chạy thử Css box-shadow mặc định</h1>
<div style="box-shadow: 5px 10px #333">box-shadow: 5px 10px #333</div>
</body>
</html>
Css box-shadow làm mờ
box-shadow: 0 4px 4px rgba(79, 79, 79, .25);
box-shadow: 0px 4px 4px #333;
Cột 1 số px đẩy từ bên trái qua, cột 2 quy định chiều cao độ mờ ở dưới, cột 3 độ dày làm mờ, cột 4 mã màu (có thể màu hex cho opacity).
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css box-shadow làm mờ</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:400px;margin-bottom:50px;height:100px;float:left;line-height:100px;text-align:center; margin-left:50px;margin:top:50px;background:#fff;border:1px solid #000;}
</style>
</head>
<body>
<h1>Chạy thử Css box-shadow làm mờ</h1>
<div style="box-shadow: 0 4px 4px rgba(79, 79, 79, .25);"> box-shadow: 0 4px 4px rgba(79, 79, 79, .25);</div>
<div style="box-shadow: 50px 14px 5px #333;">box-shadow: 50px 14px 5px #333;</div>
</body>
</html>
Css box-shadow theo bán kính
box-shadow: 0px 10px 20px 5px #888888;
Cột 1 là số px đẩy từ bên trái qua, cột 2 là số px đẩy từ trên xuống, cột 3 là số độ mờ, cột 4 là chiều cao độ mờ, cột 5 là màu sắc.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css box-shadow theo bán kính</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:400px;height:200px;float:left;line-height:200px;text-align:center; margin-left:50px;margin:top:50px;background:#fff;border:1px solid #000;}
</style>
</head>
<body>
<h1>Chạy thử Css box-shadow theo bán kính</h1>
<div style="box-shadow: 0px 10px 20px 5px #888888;">box-shadow: 0px 10px 20px 5px #888888;</div>
</body>
</html>
Css box-shadow bên trong
box-shadow: 0px 0px 10px red inset;
box-shadow: 20px 40px 10px red inset;
Cột 1 là độ dày bên trái, cột 2 là độ dày ở trên, cột 3 là mức độ làm mờ, cột 4 là màu sắc, cột inset quy định box-shadow ở bên trong.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css box-shadow bên trong</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:400px;height:100px;margin-bottom:50px; float:left;line-height:100px;text-align:center; margin-left:50px;margin:top:50px;background:#fff;border:1px solid #000;}
</style>
</head>
<body>
<h1>Chạy thử Css box-shadow bên trong</h1>
<div style="box-shadow: 0px 0px 10px red inset;">box-shadow: 0px 0px 10px red inset;</div>
<div style="box-shadow: 20px 40px 10px red inset;">box-shadow: 20px 40px 10px red inset;</div>
</body>
</html>
Ứng dụng box-shadow trong thiết kế giao diện website
box-shadow không chỉ dùng để tạo bóng cho một phần tử mà còn giúp phân tách các khu vực, tạo cảm giác về chiều sâu và hướng sự chú ý của người dùng đến những thành phần quan trọng. Khi sử dụng đúng mức, hiệu ứng này giúp giao diện có cấu trúc rõ ràng hơn mà không cần thêm nhiều chi tiết trang trí.
Tạo chiều sâu cho khối nội dung
Với các thẻ chứa nội dung như card, hộp thông tin hoặc khu vực nổi bật, một lớp bóng nhẹ có thể tạo cảm giác phần tử đang tách khỏi nền. Cách này đặc biệt hữu ích khi nền và khối nội dung có màu tương đối gần nhau.
Chẳng hạn, có thể tạo một card đơn giản bằng cách đặt độ lệch nhỏ và độ mờ vừa phải:
.card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
Không nên tăng độ đậm của bóng chỉ để làm phần tử nổi bật hơn. Bóng quá lớn hoặc quá tối có thể khiến giao diện nặng nề, đồng thời làm giảm sự phân cấp thị giác giữa các khu vực.
Làm nổi bật nút và thành phần tương tác
box-shadow có thể hỗ trợ người dùng nhận biết những thành phần có khả năng tương tác như nút, ô nhập liệu hoặc các khối được chọn. Một hiệu ứng nhẹ khi di chuột giúp trạng thái của phần tử dễ nhận biết hơn.
.button {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.button:hover {
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}
Cách dùng này nên đi kèm với sự thay đổi rõ ràng về màu sắc, vị trí hoặc trạng thái. Không nên chỉ dựa vào bóng để truyền đạt thông tin tương tác, đặc biệt với những thành phần quan trọng trên giao diện.
Kết hợp box-shadow với border-radius
border-radius và box-shadow thường được sử dụng cùng nhau để tạo các khối giao diện mềm mại như card, hộp thông báo hoặc nút. Khi bán kính bo góc và vùng bóng có sự đồng nhất, phần tử sẽ trông tự nhiên hơn.
.card {
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
Độ bo góc quá lớn nhưng bóng lại quá sắc có thể làm mất sự cân đối. Vì vậy, nên điều chỉnh cả hai thuộc tính dựa trên kích thước và vai trò của từng thành phần thay vì áp dụng một giá trị giống nhau cho toàn bộ website.
Lưu ý khi sử dụng box-shadow
Điều quan trọng nhất là sử dụng bóng có chủ đích. Không phải thành phần nào trên trang cũng cần hiệu ứng này. Nếu quá nhiều khối cùng có bóng, giao diện dễ trở nên rối và người dùng khó nhận biết đâu là nội dung chính.
- Ưu tiên bóng nhẹ đối với các thành phần có nền sáng.
- Giữ độ lệch, độ mờ và độ lan phù hợp với kích thước phần tử.
- Không dùng bóng quá đậm để thay thế cho sự tương phản màu sắc cần thiết.
- Hạn chế áp dụng nhiều lớp bóng phức tạp nếu không tạo ra giá trị thị giác rõ ràng.
- Kiểm tra hiệu ứng trên cả màn hình lớn và thiết bị di động để bảo đảm giao diện vẫn dễ nhìn.
Một thiết kế tốt không nằm ở việc tạo ra bóng nổi bật nhất mà ở khả năng dùng bóng vừa đủ để định hướng thị giác. Khi mỗi hiệu ứng đều có mục đích, box-shadow sẽ trở thành một công cụ hỗ trợ bố cục thay vì chỉ là chi tiết trang trí.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính box-shadow trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
