Properties

Properties

Editing
  • account_tree
  • bug_report

mask-border-repeat

소스 이미지의 가장자리 영역이 요소의 마스크 테두리 크기에 맞게 조정되는 방식을 지정한다.

설명

현재 대부분의 웹브라우저가 mask-border-*는 벤더프리픽스 타입의  -webkit-mask-box-image-* 속성으로 처리된다. 자세한 사항은 지원 웹브라우저 현황을 참고하기 바란다.

사용 가능한 값 타입

<'mask-border-repeat'>

DEVDIC-Specified Data Types

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

  • CSS Masking Module Level 1
    [ stretch | repeat | round | space ]{1,2}

사용되는 키워드

  • repeat

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

  • round

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

  • space

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

  • stretch

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

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

  • CSS Masking Module Level 1

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

    Example
  • CSS Masking Module Level 1

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

    Example
  • CSS Masking Module Level 1

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

    Example
  • CSS Masking Module Level 1

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

    Example

구문

  • mask-border-repeat: round;
    CSS Masking Module Level 1

버전 명세

Modules
Module NameStatusSummary
CSS Masking Module Level 1후보 추천 초안

Last review date: 2023-1-14

지원 웹브라우저