Properties

Properties

Editing
  • account_tree
  • bug_report

border-image-width

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

설명

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

사용 가능한 값 타입

<'border-image-width'>

DEVDIC-Specified Data Types

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

이미지가 적용되는 상자의 테두리 영역을 9개의 영역으로 나누는 오프셋 값을 나타낸다.

  • CSS Backgrounds and Borders Module Level 3
    [ <length-percentage [0,∞]| <number [0,∞]| auto ]{1,4}

    최대 4개의 값을 지정할 수 있는 다음의 값을 가질 수 있다.

    <length-percentage [0,∞]>
    테두리 이미지 영역의 크기(수평 오프셋 영역의 너비, 수직 오프셋 영역의 높이)를 나타낸다.
    <number [0,∞]>
    계산된 해당 테두리 너비의 배수를 나타낸다.
    auto
    테두리 이미지의 너비는 해당 이미지 조각의 원래 너비 또는 높이로 사용된다. 이미지에 필요한 원래의 치수가 없다면 계산된 해당 테두리 너비가 대신 사용된다.

포함된 타입

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

  • <length-percentage>

    <length><percentage> 타입을 나타낸다.

    • CSS Values and Units Module Level 3
      <length> | <percentage>
    Details

    포함된 타입

    • <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

        초를 나타낸다.

    • <percentage>

      어떠한 기준으로 부터 백분율로 표현한다.

  • <number>

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

사용되는 키워드

  • auto

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

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

  • 〈number〉1
    CSS Backgrounds and Borders Module Level 3

구문

  • 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

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

테스트 도구

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

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

지원 웹브라우저