Thuộc tính box-shadow của HTML DOM được sử dụng để lấy hoặc đặt bóng trong hoặc xung quanh khung của một phần tử.
Sau đây là cú pháp cho -
Đặt thuộc tính boxShadow -
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Các giá trị thuộc tính được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| không | Đây là giá trị mặc định và không hiển thị bóng. |
| h-offset | Điều này chỉ định khoảng cách của bóng so với độ lệch ngang. Đây là một giá trị bắt buộc và giá trị dương cho biết bóng sẽ nằm ở phía bên phải của hộp trong khi giá trị âm có nghĩa là nó sẽ ở phía bên trái của hộp. |
| v-offset | Điều này chỉ định khoảng cách của bóng so với độ lệch dọc. Đây là một giá trị bắt buộc và giá trị dương cho biết bóng sẽ nằm từ phía dưới cùng của hộp trong khi giá trị âm có nghĩa là nó sẽ từ phía trên cùng của hộp. |
| mờ | Để chỉ định bán kính mờ. |
| lây lan | Để chỉ định bán kính lây lan. |
| color | Để chỉ định màu bóng. |
| nội dung | Điều này làm cho bóng đổ từ ngoài vào trong cho một phần tử. |
| đầu tiên | Để đặt thuộc tính này thành giá trị ban đầu. |
| kế thừa | Để kế thừa giá trị thuộc tính mẹ |
Chúng ta hãy xem một ví dụ cho thuộc tính boxShadow -
Ví dụ
<!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="The box shadow is changed now ";
}
</script>
</head>
<body>
<div id="DIV1">This is a sample div</div>
<p>Change the above div border width by clicking the below button</p>
<button onclick="changeBoxShadow()">Change Box Shadow</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào “ Thay đổi bóng hộp” nút -
