Properties

Properties

Editing
  • account_tree
  • bug_report

mask-origin

마스크의 원점을 지정한다.

사용 가능한 값 타입

<'mask-origin'>

DEVDIC-Specified Data Types

mask-origin 속성에 사용되는 타입이다.

  • CSS Masking Module Level 1
    <geometry-box>#

포함된 타입

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

  • <geometry-box>

    <basic-shape>과 함께 지정하면 <basic-shape>에 대한 참조 박스를 제공한다.

    자체적으로 지정된 경우 모서리 모양을 포함하여 지정된 박스의 가장자리를 클리핑 경로로 사용한다.

    • CSS Masking Module Level 1
      <shape-box> | fill-box | stroke-box | view-box
    Details

    포함된 타입

    • <shape-box>

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

      • <box> | margin-box
      Details

      사용되는 키워드

      • border-box

        CSS Box Model Module Level 3

        테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

      • content-box

        CSS Box Model Module Level 3

        실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

      • margin-box

        바깥쪽 여백 가장자리까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

      • padding-box

        CSS Box Model Module Level 3

        내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

      • fill-box

        오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

      • stroke-box

        스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

      • view-box

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

    사용되는 키워드

    • fill-box

      오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

    • stroke-box

      스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

    • view-box

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

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

  • 〈shape-box〉border-box
    CSS Box Model Module Level 3

    테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

  • 오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

  • 스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

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

  • 〈shape-box〉content-box
    CSS Box Model Module Level 3

    실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

    Example
  • 〈shape-box〉margin-box

    바깥쪽 여백 가장자리까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

  • 〈shape-box〉padding-box
    CSS Box Model Module Level 3

    내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

    Example
  • 오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

  • 〈shape-box〉stroke-box

    스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

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

버전 명세

Modules
Module NameStatusSummary
CSS Masking Module Level 1후보 추천 초안

Last review date: 2023-1-14

지원 웹브라우저