Properties

Properties

Draft
  • account_tree
  • bug_report

border-image-width

테두리 이미지의 너비를 지정한다.

설명

위, 오른쪽, 아래, 왼쪽 순으로 네 개의 값을 이용해서 방향별로 이미지의 너비를 설정할 수 있다. 값은 생략될 수 있으나 반드시 한 개 이상의 값을 설정해야 한다.

설정 가능한 속성 값

  • length숫자CSS3

    이미지 테두리의 너비를 숫자와 픽셀 단위로 설정한다. 퍼센트(%) 단위로 설정된 경우에는 경계 이미지 영역의 크기를 참조한다.

  • number숫자CSS3

    기본 값은 1이며 요소가 가지고 있는 테두리 두께의 배수를 설정한다.

  • auto키워드CSS3

    테두리에 사용된 이미지 슬라이스의 실제 너비 또는 높이로 설정된다.

  • initial키워드CSS3

    CSS 기본 값으로 설정된다.

구문

  • border-image-width 4px 6px 8px 10px;사용 예CSS3

    네 개의 값이 공백으로 구분된 경우에는 차례대로 위, 오른쪽, 아래, 왼쪽 방향의 테두리의 이미지 영역의 너비 값으로 설정된다.

  • border-image-width 4px 6px 8px;사용 예CSS3

    네번째 값이 생략된 상태로 세 개의 값이 공백으로 구분된 경우 첫번째 값은 위쪽, 두번째 값은 오른쪽, 세번째 값은 아래쪽의 테두리 이미지 영역의 너비 값으로 사용된다. 생략된 네번째 값은 두번째 값으로 설정된다.

  • border-image-width 4px 6px;사용 예CSS3

    세번째와 네번째 값이 생략된 상태로 두 개의 값이 공백으로 구분된 경우 첫번째 값은 위쪽, 두번째 값은 오른쪽이며 생략된 세번째 값은 첫번째 값으로, 생략된 네번째 값은 두번째 값으로 테두리 이미지 영역의 너비로 설정된다.

  • border-image-width 4px;사용 예CSS3

    요소의 네 방향 테두리 이미지 영역의 너비를 설정한다.

테스트 도구

테두리로 적용할 이미지의 너비를 설정한다.

지원 웹브라우저