Properties

Properties

Editing
  • account_tree
  • bug_report

border-image-slice

요소의 테두리에 적용될 이미지의 범위를 요소의 방향에 따라 좌표, 비율로 설정한다.

사용 가능한 값 타입

〈'border-image-slice'〉

사용되는 키워드

  • fill

    테두리 이미지의 중간 부분이 유지된다. 요소의 내부 영역에 배경 이미지처럼 포함하여 표시한다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

구문

  • border-image-slice 100%;CSS3

    기본 값이며 테두리로 사용될 이미지의 가로 또는 세로 전체를 테두리의 영역으로 잡는다.

  • border-image-slice 20 30 40 50;CSS3

    네 개의 숫자가 공백으로 구분되어 값으로 작성된 경우 첫번째 값은 top 을 가리키며 시계방향으로 차례대로 right, bottom, left 값을 갖는다. 이 네개의 값이 모서리에 사용될 이미지의 영역을 설정하게 된다.

  • border-image-slice 20 30 40;CSS3

    세 개의 숫자가 공백으로 구분되어 값으로 작성된 경우 첫번째 값은 top 을 가리키며 시계방향으로 차례대로 right, bottom 값을 갖는다. 생략된 네번째(left) 값은 두번째 값과 동일하게 처리된다. 이렇게 처리되는 네개의 값이 모서리에 사용될 이미지의 영역을 설정하게 된다.

  • border-image-slice 20 30;CSS3

    두 개의 숫자가 공백으로 구분되어 값으로 작성된 경우 첫번째 값은 top을 가리키며 차례대로 right 값을 갖는다. 생략된 세번째(bottom) 값은 첫번째 값으로, 네번째(left) 값은 두번째 값과 동일하게 처리된다. 이렇게 처리되는 네개의 값이 모서리에 사용될 이미지의 영역을 설정하게 된다.

  • object.style.borderImageSlice = "20%";CSS3

    자바스크립트 형식

테스트 도구

테두리에 사용된 이미지가 네 변에 적용되는 범위를 정한다.

지원 웹브라우저