Properties

Properties

Editing
  • account_tree
  • bug_report

border-image-outset

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

설명

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

사용 가능한 값 타입

<'border-image-outset'>

DEVDIC-Specified Data Types

border-image-outset 속성에 사용되는 타입이다.

테두리 이미지 영역이 테두리 상자를 넘어 확장되는 양을 지정한다. 기본 값은 0이다.

  • CSS Backgrounds and Borders Module Level 3
    [ <length [0,∞]| <number [0,∞]> ]{1,4}
    <length [0,∞]>
    지정된 길이의 시작을 나타낸다.
    <number [0,∞]>
    계산된 해당 테두리 너비의 지정된 배수의 시작을 나타낸다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <length>

    숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

    • CSS Basic User Interface Module Level 4
      <length>
    Details

    사용되는 단위

    아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

    • cm

      1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

    • in

      1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

    • mm

      1cm의 1/10 값을 나타낸다.

    • pc

      1in의 1/16 값을 나타낸다.

    • pt

      1in의 1/72 값을 나타낸다.

    • px

      스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

    • Q

      1cm의 1/40을 나타낸다.

    • deg

      보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

    • grad

      400grad(그라디안)은 완전한 원을 만든다.

    • rad

      2π(라디안)이 완전한 원을 만든다.

    • turn

      1turn(턴)이 완전한 원을 만든다.

    • cap

      대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

    • ch

      글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

    • em

      대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

    • ex

      대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

    • ic

      한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

    • lh

      요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

    • rem

      html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

    • rlh

      html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

    • Hz

      1초당 발생한 진동수를 나타낸다.

    • kHz

      1000Hz를 나타낸다.

    • fr

      그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

    • vb

      html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

    • vh

      뷰포트 높이를 상대적으로 1% 높이를 갖는다.

    • vi

      html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

    • vmax

      vw 또는 vh 중 큰 값을 나타낸다.

    • vmin

      vw 또는 vh 중 작은 값을 나타낸다.

    • vw

      뷰포트 너비를 상대적으로 1% 폭을 갖는다.

    • dpcm

      1cm당 점(dot)의 수를 나타낸다.

    • dpi

      1in당 점(dot)의 수를 나타낸다.

    • dppx

      1픽셀(pixel)당 점(dot)의 수를 나타낸다.

    • ms

      1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

    • s

      초를 나타낸다.

  • <number>

    정수 또는 실수를 표현한다.

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

구문

  • border-image-outset: 0;
  • 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의 크기로 확장한다.

예제

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

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

지원 웹브라우저