Properties

Properties

Draft
  • account_tree
  • bug_report

border-image-outsetCSS3

테두리에 적용된 이미지의 영역이 요소의 테두리 영역을 넘어 확장되는 크기를 설정한다.

설명

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

설정 가능한 속성 값

  • length숫자CSS3

    숫자와 단위를 이용해서 설정한다. 0이 기본 값이다.

  • number숫자CSS3

    해당 테두리 두께의 배수로 설정한다.

  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • border-image-outset 2px 1px 3px 4px;사용 예CSS3

    네 개의 값이 공백으로 구분된 경우에는 차례대로 위, 오른쪽, 아래, 왼쪽 방향의 확장 값으로 설정된다.

  • border-image-outset 2px 1px 3px;사용 예CSS3

    네번째 값이 생략된 상태로 세 개의 값이 공백으로 구분된 경우 첫번째 값은 위쪽, 두번째 값은 오른쪽, 세번째 값은 아래쪽의 확장 값으로 사용된다. 생략된 네번째 값은 두번째 값으로 설정된다.

  • border-image-outset 2px 1px;사용 예CSS3

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

  • border-image-outset 2px;사용 예CSS3

    요소의 네 방향 모두 동일한 2px의 크기로 확장한다.

예제

테두리가 확장되는 크기를 지정한다.

버전 명세

Version NameDescriptionFlags
CSS3

지원 웹브라우저