Thuộc tính boxShadow (hay box-shadow trong CSS) dùng để lấy hoặc thiết lập bóng đổ trong hoặc quanh khung của phần tử.
Cú pháp
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Giá trị tham số
| Giá trị | Mô tả |
|---|---|
| none | Không bóng (mặc định) |
| h-offset | Độ lệch ngang (bắt buộc). Dương: bóng bên phải. Âm: bóng bên trái |
| v-offset | Độ lệch dọc (bắt buộc). Dương: bóng bên dưới. Âm: bóng bên trên |
| blur | Bán kính mờ (blur radius) |
| spread | Bán kính lan tỏa (spread radius) |
| color | Màu bóng |
| inset | Bóng bên trong (inner shadow) thay vì bên ngoài |
| initial | Giá trị mặc định |
| inherit | Kế thừa từ phần tử cha |
Ví dụ minh họa
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 100px;
box-shadow: 10px 10px 3px orange;
}
</style>
<script>
function changeBoxShadow() {
document.getElementById("DIV1").style.boxShadow = "1px 10px 10px 10px green";
document.getElementById("Sample").innerHTML = "Box shadow đã được thay đổi";
}
</script>
</head>
<body>
<div id="DIV1">Đây là div mẫu</div>
<p>Thay đổi box shadow của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeBoxShadow()">Thay đổi Box Shadow</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Ban đầu bóng: 10px phải, 10px dưới, blur 3px, màu cam. Sau khi nhấn nút: 1px phải, 10px dưới, blur 10px, spread 10px, màu xanh lá.
Mẹo: Có thể tạo nhiều bóng cách nhau bởi dấu phẩy: box-shadow: 0 0 10px red, 0 0 20px blue.