border-image-source상속 불가애니메이션 허용

사용 가능한 값 타입

• CSS Backgrounds and Borders Module Level 3

  none | <image>

포함된 타입

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

• <image>

  2차원 이미지를 나타낸다.

  • CSS Images Module Level 4

    <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

    <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

    현재 image()는 지원하지 않는다.

  Details

  포함된 타입

  • <gradient>

    두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

    • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

      선형 그라데이션

      Example
    • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

      원형 그라데이션

      Example
    Details

    관련 함수

    모든 함수를 표시하지 않을 수도 있다.

    • conic-gradient()

      중심점을 기준으로 회전하는 방식으로 그라데이션을 생성한다.

      • CSS Color Module Level 4

        background: conic-gradient(from 0deg at center center, #FF0000, #FFFF00);

        Example

    • linear-gradient()

      선형 그라디언트를 생성한다.

      • CSS Images Module Level 4

        linear-gradient(<angle>, <color-stop-list>)

        Example
      • CSS Images Module Level 4

        linear-gradient(<side-or-corner>, <color-stop-list>)

        Example
      • CSS Images Module Level 4

        linear-gradient(<color-stop-list>#);
        linear-gradient(<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#);

        Example

    • radial-gradient()

      원형 그라디언트를 생성한다.

      • CSS Images Module Level 4

        radial-gradient(circle 100px at 50% 20%, blue, pink, yellow)

        Example

    • repeating-linear-gradient()

      설정된 <linear-gradient> 값이 반복되는 선형 그라디언트를 생성한다.

    • repeating-radial-gradient()

      설정된 <radial-gradient> 값이 반복되는 원형 그라디언트를 생성한다.

    동일한 타입을 사용하는 관련 속성

    모든 속성을 표시하지 않을 수도 있다.

    • background

      요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

    • background-image

      선택자를 갖는 요소에 배경 이미지를 설정한다.

  • <url>

    이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

    • CSS Values and Units Module Level 4

      <url()> | <src()>

    Details

    포함된 타입

    • <src()>

      src() 함수의 매개변수를 나타낸다.

      • CSS Values and Units Module Level 4

        src( <string> <url-modifier>* )

      Details

      포함된 타입

      • <string>

        따옴표로 감싸진 데이터 유형을 표현한다.

        • "this is a 'string'."

        Details

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • font-family

          글꼴을 지정한다.

        • content

          가상 요소로 생성할 콘텐츠를 설정한다.

        • quotes

          인용 부호의 유형을 설정한다.

      • <url-modifier>

        URL의 의미나 해석을 어떻게든 변경하는 타입이다.

    • <url()>

      url() 함수의 매개변수를 나타낸다.

      • CSS Values and Units Module Level 4

        url( <string> <url-modifier>* ) | <url-token>

      Details

      포함된 타입

      • <url-token>

        URL Token Railroad Diagrams

      • <string>

        따옴표로 감싸진 데이터 유형을 표현한다.

        • "this is a 'string'."

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]

      • <url-modifier>

        URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

    관련 함수

    모든 함수를 표시하지 않을 수도 있다.

    • url()

      CSS에서 사용할 외부 리소스를 가져온다.

      • CSS1, CSS Values and Units Module Level 3Post pending

        background-image: url();

        두 개 이상의 배경 이미지를 설정한다.

        
        

        url() 함수의 인수 값으로 SVG Data URL을 이용한 경우에 대한 샘플 코드

    동일한 타입을 사용하는 관련 속성

    모든 속성을 표시하지 않을 수도 있다.

    • background-image

      선택자를 갖는 요소에 배경 이미지를 설정한다.

    • clip-path

      요소의 클리핑 범위를 설정한다.

  관련 함수

  모든 함수를 표시하지 않을 수도 있다.

  • cross-fade()

    이미지 사이를 전환할 때 CSS는 시작 및 종료 이미지의 조합인 중간 이미지를 명시적으로 참조하는 방법이 필요하다. 이것은 결합할 두 이미지와 결합이 전환에서 얼마나 멀리 있는지를 나타내는 cross-fade() 함수로 수행된다.

  • element()

    작성자가 문서의 요소를 이미지로 사용할 수 있다. 참조된 요소의 모양이 변경되면 이미지도 변경된다.

    • CSS Images Module Level 4

      background-image: element(#original);

      Example

  • image-set()

    사용자의 장치에서 가장 적합한 이미지의 해상도를 보여줄 수 있도록 한다.

    • CSS Images Module Level 4

      background-image: image-set( url("http://sample.devdic.com/parallax/images/bg_2880x1800.jpg") 1x,	url("http://sample.devdic.com/parallax/images/bg_3200x2000.jpg") 2x);

      Example

공통적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

• none

  어떠한 값도 설정하지 않음을 나타낸다.