Thuộc tính borderImageRepeat xác định cách các lát cắt hình ảnh viền được lặp lại: kéo dãn, lặp, bo tròn, hoặc phân bố khoảng trắng.
Cú pháp
object.style.borderImageRepeat = "stretch|repeat|round|space|initial|inherit"
Các giá trị
| Giá trị | Mô tả |
|---|---|
| stretch | Kéo dãn ảnh lấp đầy vùng (mặc định). |
| repeat | Lặp ảnh để lấp đầy (có thể cắt ngang lát). |
| round | Lặp và co giãn nhẹ để lát ảnh vừa khít số nguyên lần. |
| space | Giống round nhưng phân bố khoảng trắng đều thay vì co giãn ảnh. |
| initial | Đặt về mặc định. |
| inherit | Kế thừa từ cha. |
Ví dụ
Thay đổi border-image-repeat:
<!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 = "Border image giờ bị kéo dãn";
}
</script> </head>
<body>
<h2>Demo Heading</h2>
<p id="b1">Văn bản trong paragraph có border image</p>
<p>Nhấn nút để đổi border-image-repeat</p>
<button onclick="changeBorderRepeat()">THAY ĐỔI LẶP VIỀN</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Ban đầu repeat (lặp lát ảnh):
Sau khi nhấn nút, stretch (kéo dãn):
