Properties

Properties

Editing
  • account_tree
  • bug_report

border-image-repeat

요소의 네 변 테두리에 이미지를 어떻게 반복적으로 적용할 지를 결정한다.

사용 가능한 값 타입

<'border-image-repeat'>

DEVDIC-Specified Data Types

border-image-repeat 속성에 사용되는 타입이다.

테두리 이미지의 측면과 중간 부분에 대한 이미지의 크기가 조정되고 바둑판식으로 배열되는 방식을 지정한다. 기본 값은 stretch 이다.

  • CSS Backgrounds and Borders Module Level 3
    [ stretch | repeat | round | space ]{1,2}

    하나 이상 최대 2개까지 지정된 키워드를 설정한다. 첫 번째 지정된 키워드는 상단, 중간 및 하단 부분의 수평 스케일링 및 타일링에 적용된다. 두 번째로 지정된 키워드는 왼쪽, 중간 및 오른쪽 부분의 수직 스케일링 및 타일링에 적용된다. 두 번째는 키워드는 생략할 수 있으나 첫 번째 키워드와 동일한 것으로 처리된다.

사용되는 키워드

  • repeat

    변에 해당하는 이미지의 영역을 타일 처럼 요소의 테두리에 반복 배치한다. 변의 길이에 따라서 모서리쪽의 반복되는 이미지의 일부가 잘릴 수 있다.

  • round

    repeat 와 동일한 방식으로 테두리에 이미지를 적용하나 변의 길이에 맞게 반복되는 영역을 적절하게 조절하여 잘리는 부분이 없도록 한다.

  • space

    repeat 처럼 변의 길이에 맞게 이미지가 반복되지만 이미지의 영역을 조절하지 않고 반복되는 이미지와 이미지 사이에 공간을 두어 잘리는 부분 없이 변의 길이에 맞춘다.

  • stretch

    이미지의 영역을 늘려 요소의 테두리로 적용한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • CSS Backgrounds and Borders Module Level 3

    이미지의 영역을 늘려 요소의 테두리로 적용한다.

구문

  • border-image-repeat: space;
    CSS Backgrounds and Borders Module Level 3
  • object.style.borderImageRepeat = "repeat";
    CSS3

테스트 도구

테두리에 사용된 이미지가 네 변의 길이에 맞추어 반복되는 방식을 지정한다.

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

지원 웹브라우저