Thuộc tính HTML DOM borderImageRepeat được sử dụng để xác định cách các lát hình ảnh được lặp lại trong hình ảnh đường viền. Điều này đặt hoặc lấy nếu đường viền Hình ảnh phải được làm tròn, lặp lại hoặc kéo dài.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính borderImageRepeat.
object.style.borderImageRepeat = "stretch|repeat|round|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 | Kéo dài Điều này làm cho hình ảnh được kéo dài để lấp đầy khu vực. Đây là giá trị mặc định. |
| 2 | Lặp lại Điều này làm cho hình ảnh được lặp lại để lấp đầy khu vực. |
| 3 | Vòng Hình ảnh thường được lặp lại để lấp đầy khu vực và nó được thay đổi tỷ lệ nếu nó không lấp đầy toàn bộ số lần của khu vực. |
| 4 | Khoảng trắng Tương tự như hình tròn nhưng nếu hình ảnh không được lặp lại nhiều lần thì không gian xung quanh các ô sẽ được phân phối. |
| 5 | tên đầu tiên Để đặt thuộc tính này thành giá trị ban đầu. |
| 6 | 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 borderImageRepeat -
<!DOCTYPE html>
<html>
<head>
<style>
#b1 {
border: 30px solid transparent;
padding: 5px;
border-image-source:
url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structurealgorithm.jpg");
border-image-repeat: repeat;
border-image-slice: 30;
}
</style>
<script>
function changeBorderRepeat(){
document.getElementById("b1").style.borderImageRepeat="stretch";
document.getElementById("Sample").innerHTML="The border image will now be
stretched";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="b1">This is some random text inside the paragraph. Here is another line in this paragraph</p>
<p>Change the above div border image repeat property by clicking the below button</p>
<button onclick="changeBorderRepeat()">Change Border Repeat</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 -
