Thuộc tính HTML DOM borderImageOutset được sử dụng để đặt hoặc trả về giá trị mà vùng hình nền mở rộng hộp đường viền phần tử. Bằng cách sử dụng các giá trị cho trên cùng, trái, phải và dưới cùng, chúng tôi có thể chỉ định hình ảnh nền sẽ mở rộng bao nhiêu so với đường viền tương ứng của phần tử.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính borderImageOutset -
object.style.borderImageOutset = "length|number|initial|inherit"
Các giá trị thuộc tính được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| Chiều dài | Để xác định hình ảnh sẽ kéo dài bao xa so với hộp viền. Giá trị mặc định được đặt thành 0, tức là nó không vượt ra ngoài hộp viền. |
| Số | Để xác định giá trị số là bội số của chiều rộng đường viền. |
| Ban đầu | Để đặ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ẹ |
Ví dụ
Chúng ta hãy xem ví dụ cho thuộc tính borderImageOutset -
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border: 20px solid transparent;
margin: 20px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30
round;
border-image-outset: 5px;
background-color: lightgreen;
}
</style>
<script>
function changeBottomOutset(){
document.getElementById("P1").style.borderImageOutset="20px";
document.getElementById("Sample").innerHTML="The border image outset is now
increased";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="P1"> This is a sample paragraph containing some text. This paragraph is created only for the sake of this example</p>
<p>Change the above div border image outset by clicking the below button</p>
<button onclick="changeBottomOutset()">Change Bottom Outset</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút “Thay đổi khoảng cách đường viền” -
