HTML DOM borderImageRepeat 속성은 테두리 이미지에서 이미지 슬라이스가 반복되는 방식을 정의하는 데 사용됩니다. 이것은 borderImage가 반올림, 반복 또는 확장되어야 하는지 여부를 설정하거나 가져옵니다.
구문
다음은 −
의 구문입니다.borderImageRepeat 속성을 설정합니다.
object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit"
값
속성 값은 다음과 같이 설명됩니다 -
| Sr.No | 가치 및 설명 |
|---|---|
| 1 | 스트레치 이렇게 하면 이미지가 영역을 채우도록 늘어납니다. 이것은 기본값입니다. |
| 2 | 반복 이렇게 하면 이미지가 영역을 채우기 위해 반복됩니다. |
| 3 | 원형 이미지는 일반적으로 영역을 채우기 위해 반복되며 전체 횟수로 영역을 채우지 않으면 크기가 다시 조정됩니다. |
| 4 | 공간 원형과 같지만 이미지가 정수로 반복되지 않으면 타일 주변의 공간이 분산됩니다. |
| 5 | 초기 이 속성을 초기 값으로 설정합니다. |
| 6 | 상속 상위 속성 값을 상속하려면 |
예시
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> 출력
이것은 다음과 같은 출력을 생성합니다 -
COLLAPSE BORDER 버튼 클릭 시 -
