Thuộc tính borderImage được sử dụng để thiết lập hoặc lấy hình ảnh đường viền của một phần tử. Nó là một thuộc tính viết tắt, để chúng ta có thể thao tác các thuộc tính borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset và borderImageRepeat cùng một lúc.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính borderImage -
object.style.borderImage = "source slice width outset repeat|initial|inherit"
Giá trị
Các giá trị thuộc tính được giải thích như sau -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | borderImageSource Nó chỉ định đường dẫn hình ảnh được sử dụng làm đường viền. |
| 2 | borderImageSlice Nó chỉ định các hiệu ứng hướng vào trong của đường viền hình ảnh. |
| 3 | borderImageWidth Nó chỉ định chiều rộng đường viền hình ảnh. |
| 4 | borderImageOutset Nó chỉ định số lượng khu vực hình ảnh đường viền mà nó mở rộng ra ngoài hộp đường viền. |
| 5 | borderImageRepeat Nó chỉ định rằng đường viền hình ảnh phải được làm tròn, lặp lại hoặc kéo dài. |
| 6 | tên đầu tiên Để đặt thuộc tính này thành giá trị ban đầu. |
| 7 | kế thừa Để kế thừa giá trị tài sản mẹ |
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính borderImage−
<!DOCTYPE html>
<html>
<head>
<style>
#PARA1 {
border: 15px solid transparent;
padding: 12px;
border-image: url("https://www.tutorialspoint.com/images/blockchain.png") 20 stretch;
width: 100px;
}
</style>
<script>
function changeBorderImage(){
document.getElementById("PARA1").style.borderImage="url('https://www.tutorialspoint.com/im
ages/mongodb.png') 20 round";
document.getElementById("Sample").innerHTML="The border image is now changed";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p id="PARA1">This is a sample paragraph. Here is another line</p>
<p>Change the above paragraph border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</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 BIÊN GIỚI THUỘC -
