Properties

Properties

Draft
  • account_tree
  • bug_report

border-image-slice

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

설정 가능한 속성 값

  • number숫자CSS3

    숫자 또는 숫자와 단위 퍼센트를 이용해서 테두리로 적용할 이미지의 영역을 설정한다. 기본 값은 100% 이다.

  • fill키워드CSS3

    요소의 내부 영역에 배경 이미지처럼 포함하여 표시한다.

  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • border-image-slice number or initial <optional>fill;기본형식CSS3

    단위 없이 숫자로만 지정해서 좌표로 정의하거나 '%' 단위를 이용해서 이미지의 가로 또는 세로 영역의 비율로 설정한다.

  • 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

    자바스크립트 형식

테스트 도구

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

지원 웹브라우저