Properties

Properties

Editing
  • account_tree
  • bug_report

clip-path

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

설명

쉐입(shape)을 생성하는 함수를 이용하여 원하는 모양을 만들 수 있다.

사용 가능한 값 타입

〈clip-source〉

클리핑 소스로 사용할 리소스의 경로를 나타내는 타입이다.

관련 함수들

  • url()

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

〈geometry-box〉

  • <shape-box> | fill-box | stroke-box | view-box

사용되는 키워드

  • fill-box

    오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다.

  • stroke-box

    스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다.

  • view-box

    가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈shape-box〉

    CSS 박스 모델에서 박스의 가장자리를 참조하는 키워드를 shape에게 사용하는 경우를 나타낸다.

    • <box> | margin-box

사용되는 전역 키워드

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

  • none

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

〈basic-shape〉

clip-path, shape-outside, offset-path 속성에 사용되는 형태를 나타낸다.

관련 함수들

  • circle()

    원을 생성한다.

  • ellipse()

    x축과 y축 반지름 값을 설정해 타원을 생성한다.

  • inset()

    삽입될 직사각형을 정의한다.

  • polygon()

    다각형을 생성한다.

  • rect()

    shape 타입의 값을 생성하는 함수이다. 클리핑 영역을 설정한다.

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

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

  • noneCSS3

구문

  • 〈clip-source〉 | [ 〈basic-shape〉 || 〈geometry-box〉 ] | none
  • clip-path url(clip-path);CSS3

    SVG 요소를 clip path로 지정하여 지정 대상을 클리핑(Clipping)한다.

    SVG 요소를 clip path로 지정하여 지정 대상을 클리핑한다.
  • clip-path 〈basic-shape〉;CSS3
    기본 circle shape로 클리핑 적용

테스트 도구

기본 Shape을 이용한 클리핑 처리 테스트

지원 웹브라우저